基本使用
安装
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();
}
})
