基本使用

安装

1、在使用cli安装vue时手动选择安装router。

2、使用npm命令安装,以vue3为例，vue3需要4.0以上版本vue-router：

vue3: npm install vue-router@4

使用

如果是cli安装，默认会生成router目录，在router目录下会有一个index.js文件，提供基本定义。如果不是cli安装，也可以自己创建，目录自由选择。

router的index.js文件基本格式：

import { createRouter, createWebHistory } from 'vue-router'

//路由数组
const routes = [

{
            //基本格式
        path: "",

        name: "",

        component: 组件对象,

        children: []

}

]

//路由对象
const router = createRouter({

          history: createWebHistory(process.env.BASE_URL),

          routes //上面的路由数组

})

//导出路由对象，在main.js中引用
export default router

router的index.js文件创建好之后，还需要在main.js文件中通过createApp.use()方法引入，参考：

import { createApp } from 'vue'
import Main from './Main.vue'
import router from './router'
import store from './store'
import NutUI from '@nutui/nutui';
import "@nutui/nutui/dist/style.css";

//上方是依赖
//下方通过createApp创建vue对象，然后使用use方法使用依赖
createApp(Main)
.use(store)
.use(router)
.use(NutUI)
.mount('#app')

随后在需要使用router的vue组件文件中写明:

在网页中通过url写明路由访问。

嵌套路由

vue-router官方提供了路由嵌套的基本操作。链接：
https://router.vuejs.org/zh/guide/essentials/nested-routes.html

下面演示如何将几个相关的基础路由合并成一个嵌套路由：

//有以下路由信息

const loginRouter = [

        {
              path: '/login',
              name: 'Login',
              component: Login
        },

        {
                path: '/login/pc',
                name: 'LoginForPC',
                component: LoginForPC
        },

        {
                path: '/login/phone',
                name: 'LoginForPhone',
                component: LoginForPhone
        }

]

这是一个路由对象，有三个路由，/login代表登录，/login/pc代表PC端登录页面，/login/phone代表手机端登录页面，下面采用嵌套路由结构，将/login/pc和/login/phone归属于/login，通过children指定子路由：

注意：子路由不能在前面添加 “/”，否则会被认定为一级路由。

注意：父路由必须有一个组件，否则调用路由会报错。

const loginRouter =
{
          path: '/login',
          name: 'Login',
          component: Login,
          children: [
            {
                    path: 'pc',
                    name: 'LoginForPC',
                    component: LoginForPC
            },
            {
                    path: 'phone',
                    name: 'LoginForPhone',
                    component: LoginForPhone
            }
          ]
}

子路由添加完毕后，直接通过url调用会被提示找不到路由，需要在父路由对应组件中添加router-view,添加后才能正常使用，如果不在父路由的组件中添加router-view，那么访问url时只能找到父路由内容而找不到子路由内容。

父路由组件实例：

路由文件拆分

如果把所有的路由信息都写在一个文件就会显得非常臃肿，同时也不便于观看维护，vue中路由的信息都是依赖于一个数组，所以可以将这个数组拆开，分到其他文件夹下的js文件中，通过export导出这些子数组变量，最后将这些子数组变量合并成一个大的数组。

示例

在router目录下创建主路由文件index.js,内容如下:

import { createRouter, createWebHistory } from 'vue-router'
import {errorRouters} from "@/router/error";

//理由数组，用于存储所有路由数据
let routes = []
/**
* 添加路由函数，将其他文件的路由数组进行组合
* @param routers 路由
* */
function addRouters(routers){

      for (let i = 0; i < routers.length; i++){
                          routes.push(routers[i])
      }

}

//调用addRouters组合其他文件的路由
addRouters(errorRouters);

//路由对象
const router = createRouter({

        history: createWebHistory(process.env.BASE_URL),

        routes

})

创建一个错误路由文件error.js:

//仅定义一个路由数组存储数据，然后导出，路由合并请看上方的index.js文件
export const errorRouters = [
                {
              path: "/404",
              name: "404Error",
              component: ()=>import("../views/error/404Error")
        },
        {
                path: "/invalidIdError",
                name: "InvalidIdError",
                component: ()=> import("../views/error/InvalidIdError")
        }
 ]

路由跳转前检查

可以通过router.beforeEach方法在每个路由的跳转前进行识别，其基本格式如下：

/*
* to 要跳转到哪里
* from 从哪里跳转来
* next 是一个方法，可以传入下一个跳转路由的路径，如果不传参数，代表直接跳转到to这个路由
*/
router.beforeEach((to, from, next) => {

        //进行判断，如果to路径没有匹配到现有的任何一个路由
        //作用：当to的路由为空时不跳转，同时当from的路由也为空时，则跳转到404页面
        if (to.matched.length === 0){

                  //这里打印输出
                  console.log(to, from, next)

                  //这里用三元表达式进行了判断，当from.name也就是跳转来的路由名称不为空，则直接跳转到from所代表的路由，否则跳转到404页面
                  from.name ? next({name: from.name}) : next("/404");

        }else {

                //如果to的路由名称不为空，则进行跳转
                next();

        }

})