开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第25天，点击查看活动详情

02、开始vue-router

2.1、简介

Vue Router是Vue官方推出的路由组件，与Vue深度集成，支持hash、history两种模式。

Vue2.* 版本 ▶ 对应 vue-router3.*版本，vue-router3.* 中文文档
Vue3.* 版本 ▶ 对应 vue-router4.*版本，vue-router4.* 中文文档

2.2、安装使用

通过<script>标签直接引用vue-router.js：

<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
// 注册插件
Vue.use(VueRouter);

通过 vue-cli 脚手架搭建vue的开发框架，集成了vue-router组件。
注册插件：Vue.use(VueRouter)

03、vue-router3入门

3.1、Router选项

✔️Router选项	描述
routes	路由记录配置信息，`Array<RouteConfig>`
mode	路由模式，默认`hash`，选项：`hash`、`history`、abstract（NodeJS环境）
base	url的基本路径，`"/app/"`，只有history模式有效？
linkActiveClass	`<route-link>`激活的`class`名称，默认值为`router-link-active`
linkExactActiveClass	精确匹配激活的`class`，默认值为`router-link-exact-active` ( exact /ɪɡˈzækt/ 精确)
scrollBehavior	路由切换完成后的滚动行为回调，函数 `Func(to, from, savedPosition)`
parseQuery/stringifyQuery	自定义查询字符串的解析/反解析函数

//创建路由器
let vrouter = new VueRouter({ routes: vroutes, mode: 'hash', base: '/vsystem/' });

✔️routes.route`RouteConfig`	初始化时配置用的路由记录`RouteConfig` ，在后续代码中使用的为路由对象
path	路由url路径 `path: '/user'`
component	Component 组件，可用函数方式`import`懒加载组件，提高初始化的性能
components	命名视图组件，当有多个命名视图`<router-view>`时，也要配置对应的组件
name	给路由取个名字，自己用，没其他用途，可作为显示的中文标题
redirect	重定向路由，重定向到另外的path、route。如果带有query会解析路由出错？
alias	path的别名，可一个或多个(数组`Array<string>`)别名，渲染组件一样
parent	父级路由，根级的`parent`为`undefined`
children	子路由`Array<RouteConfig>`，组件内用`<router-view>`组件作为嵌套组件的容器
props	用于给Vue组件参数`Props`传值：boolean \| Object \| Function - true：自动传递动态路径参`route.params`； - 对象，函数：把它们的结果赋值给组件props参数(按key)
beforeEnter(to, from, next)	执行路由前的一个钩子，私有的钩子，目的同全局的守卫钩子`beforeEach`
meta	路由元信息，自定义的个性化配置，在路由钩子中可以访问处理。`meta:{title:'注册'}`

✔️运行态的 $`route`路由对象	组件内`this.$route`访问，钩子函数、导航函数中的to、from、location都是此路由对象
path	路由url路径
fullPath	解析后的完整url，包含query
params	存放动态路径参数，{key:value }对象，组件内使用`this.$route.params.id`
query	url查询参数，{key:value }对象
hash	当前路由的哈希`hash`值
name	路由名称
meta	元数据记录
matched	匹配到的路由记录列表

interface RouteConfig = {
    path: string,
    component?: Component,
    name?: string, // 命名路由
    components?: { [name: string]: Component }, // 命名视图组件
    redirect?: string | Location | Function,
    props?: boolean | Object | Function,
    alias?: string | Array<string>,
    children?: Array<RouteConfig>, // 嵌套路由
    beforeEnter?: (to: Route, from: Route, next: Function) => void,
    meta?: any,
    // 2.6.0+
    caseSensitive?: boolean, // 匹配规则是否大小写敏感？(默认值：false)
    pathToRegexpOptions?: Object // 编译正则的选项
}
//$route路由对象
{
    name: "user-box", // 路由名称
    fullPath: "/user/21/vip?key=admin",
    hash: "", // 当前路由的哈希
    matched: [{… }],
    meta: {},
    params: { id: '21', type: 'vip' },
    path: "/user/21/vip",
    query: { key: 'admin' }
}

🌰简单的示例：

<style>
    .router-link-active{ background-color: rgb(168, 240, 140); }
    .nav-item{ margin: 0 10px; }
</style>
<div id="app">
    <router-link v-for="r in this.$router.options.routes" :to="r.path" class="nav-item">{{r.name}}</router-link>
    <router-view></router-view> <!-- 显示路由组件视图的容器，其实是就是一个动态组件 -->
</div>
<script>
    //路由配置RouteConfig
    let vroutes = [
        { path: '/user', name: '用户管理', component: { template: '<div>user component</div>' } },
        { path: '/login', name: '登录', component: { template: '<div>login component</div>' } }];
    //创建路由器
    let vrouter = new VueRouter({ routes: vroutes, mode: 'hash', base: '/vsystem/' });
    //app
    let app = new Vue({
        el:"#app",
        router: vrouter,
    })
</script>

3.2、router实例-创建Router()

✔️router实例-属性	描述
app、apps	Vue根实例，所有apps实例
options	参数选项
currentRoute	当前激活的路由信息对象
mode	路由模式："hash" \| "history" \| "abstract"
START_LOCATION	初始导航的路由地址，route对象
✔️Router实例-方法	描述
全局的导航守卫	beforeEach、beforeResolve、afterEach
编程式导航	push(route)、replace(route)、go(index)、back()、forward()
resolve()	❓解析目标位置
addRoute(parent?, RouteConfig)	添加路由记录、子路由，还有批量添加的`addRoutes(routes)`
getRoutes()	获取所有活跃的路由记录列表 `Array<RouteConfig>`
onReady(callback,errorback)	完成初始化后调用，初始化错误则调用errorback
onError(callback)	路由过程中出错时触发，算是一个全局路由异常捕获

注册插件：Vue.use(VueRouter)
创建全局共享的router路由器实例，并配置路由记录。
注入router，在根Vue组件上注入router实例，然后所有地方都可以用 this.$router访问了.
用<router-link>显示路由导航，<router-view>显示组件视图。
愉快的使用了，在Vue组件中访问路由的几种途径：
- this.$router，Vue中任意地方可以访问的路由器。
- this.$route，组件所属的route路由对象。

🌰创建一个路由：

<style>
    #app4 a { margin: 0 5px; }
    .router-link-active { background-color: blueviolet; color: #FFF; }
</style>
<div id="app4">
    <p>{{$router.mode}}-->{{$router.currentRoute.name}}</p>
    <div>
        <router-link to="/user/001">用户001</router-link>
        <router-link to="/login">登录</router-link>
        <a href="#" @click.prevent="$router.push('/user/002')">a-用户0002</a>
    </div>
    <hr>
    <router-view></router-view>
</div>
<script>
    // 注册插件
    Vue.use(VueRouter);
    let isAuthenticated = true;
    //组件
    const UserBox = { Prop: ['userId'], template: '<p>用户信息：{{$route.params}}</p>' };
    const Login = { template: '<p>用户登录：<br>用户名：<input></p>' };
    //路由配置
    let vroutes = [
        { path: '/user/:userId', name: '用户管理', component: UserBox },
        { path: '/login', name: '登录', component: Login, meta: { type: 'vip' } },
        { path: '/*', redirect: '/login' }];
    //创建路由器
    let vrouter = new VueRouter({ routes: vroutes, mode: 'hash', base: '/vsystem/' });
    //路由器的钩子：做一个登录权限验证，并更新文档标题
    vrouter.beforeEach((to, from, next) => {
        if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' });
        else next();
        document.title = to.name;
    });
    //app
    let app4 = new Vue({
        el: "#app4",
        router: vrouter,   //注入路由器，内部通过 this.$router 访问
    })
</script>

3.3、path路径:string

path为路由的地址，当浏览器url地址与path匹配时，就会激活当前route路由对象，并显示器对应组件component/components。

let u1 = { path: '/home', component: Home };
let u2 = { path: '/about', component: About };
let u3 = { path: '/user/register', component: Register };
let u3 = { path: '/*', component: NotFound404 };
//动态路径
let u1 = { path: '/user/:id/:type', component: UserBox }
//匹配的路径
<router-link to="/user/1/vip">用户1</router-link>

🔸 : 动态路径参数：path中可以设置动态参数，冒号:开头，后面的为参数，支持多个顺序组装：path:'/path/:参数1/:参数2'。这里的参数有什么用呢？

参数都会被放到到路由对象$route.params中。
组件内部直接使用：$route.params.id。
通过参数专递，设置路由记录props:true，参数值$route.params会传递给组件的参数Props。

🔸*通配符：*通配符匹配任意字符，可放到最后面匹配404，或重定向到默认路由。v4版本里删了，改用正则。

🔸优先级：如果相同的path，匹配哪个呢？按照代码的顺序，先到先得。

3.4、router-link/router-view

<router-link>：路由导航组件，绑定路由配置，执行路由跳转。<router-link>也是一个组件，实际是一个<a>元素。
<router-view>：路由视图组件，用来显示渲染匹配的视图组件，内部是一个Vue动态组件。如果需要动画和缓存，可以外面嵌套<transition>、<keep-alive>使用。

✔️`<router-link>`	描述
to	path，路由的目标地址，字符串、路由对象。
replace	默认`false`=`push`，执行导航是用`replace`，还是`push`，对应`history`的两个Api
append❓	是否添加基路径`base`，默认`false`
tag	最终渲染的的标签，默认`a`。v4中删掉了，用v-slot实现自定义
active-class	激活的类class名
exact	是否精确匹配连接地址，默认false。就是说默认是模糊匹配连接地址的，只要包含就激活了
event	触发路由的事件类型，默认`click`。不怎么常用，v4版本中删掉了
v-slot	作用域插槽，用来接收暴露出来的数据，`<router-link>`支持插槽
✔️`<router-view>`
name	命名视图，当有多个就需要名字了，如切换框架布局。在路由记录`components`中配置映射关系

<style>
    #app a{ margin: 0 10px; }
    .router-link-active { background-color: rgb(168, 240, 140); }
    /* 动画css */
    .v-enter, .v-leave-to { opacity: 0; }
    .v-enter { transform: translateX(30px); }
    .v-enter-active, v-leave-active { transition: all 1s; }
</style>
<div id="app">
    <div>
        <h4>router-link</h4>
        <router-link to='/user/1/vip'>用户管理1</router-link>
        <router-link to='/login'>登录</router-link>
        <!-- url变了，但没有触发路由 -->
        <a href="#user/2/vvip">a-用户2</a> 
        <a href="#" @click.prevent="$router.push('/user/003/vvip')">a-用户3</a>
    </div>
    <div>
        <h4>v-for绑定</h4>
        <router-link v-for="r in this.$router.options.routes" :to="r.path">{{r.name}}</router-link>
    </div><hr>
    <transition>
        <keep-alive>
            <router-view style="margin:10px"></router-view>
        </keep-alive>
    </transition>
</div>
<script>
    //路由配置RouteConfig
    let vroutes = [
        { path: '/user/:id/:type', name: '用户管理', component: { template: '<div>user component{{$route.params}}</div>' } },
        { path: '/login', name: '登录', component: { template: '<div>login component<br><input></div>' } }];
    //创建路由器
    let vrouter = new VueRouter({ routes: vroutes, mode: 'hash', base: '/vsystem/' });
    //app
    let app = new Vue({
        el: "#app",
        router: vrouter,
    })
</script>

📢 当<router-link>需要监听原生事件时，要加上原生修饰符@click.native="nav_click"

3.5、编程式导航

除了使用申明式导航<router-link>组件，也可也使用编程式的导航方法自定义实现导航，就是调用router提供的导航方法。

router实例-导航方法
push(location, onComplete?, onAbort?)	`location`可以是url字符，也可以是route对象
replace(location, onComplete?, onAbort?)	同上，不会添加`history`记录，
go(index)、back()、forward()	和浏览器的history操作一样的，历史页面里跳转

参数location（route对象）如果使用了path，则会忽略params （param /ˈpærəm/ 参数）。
回调 onComplete?、onAbort?，在 3.1.0+，push、replace支持了Promise，会返回一个Promise对象，可链式调用了：

this.$router.push('/user').then(onComplete).catch(onAbort)

<div>
  <h4>a标签，编程式导航</h4>
  <a href="#" @click.prevent="$router.push({path:'user/21/vip',query:{key:'admin'}})">用户1</a>
  <a href="#" @click.prevent="navClick">click登录</a>
  <a @.prevent href="#/login?key=hello">原生a</a>
  <br>
  <a href="#" @click.prevent="$router.back()">后退</a>
  <a href="#" @click.prevent="$router.forward()">前进</a>
</div>
<script>
  let app = new Vue({
    el: "#app",
    router: router,
    methods: {
      navClick() {
        if (this.$router.currentRoute.path == '/login')
          return;
        this.$router.push('/login', null, () => { });  //提供一个空的onAbort
        this.$router.replace('/login');
        this.$router.push('/user').then(onComplete).catch(onAbort); //promise方式使用
        //设置了path，params的设置就忽略了
        this.$router.push({ path: '/login', query: { key: 'admin' }, params: { id: 100 } });
        //也可以用name进行导航。注意后面的catch，因为push、replace都是用promise执行的
        this.$router.push({ name: '登录', query: { key: 'admin' }, params: { id: 12 } }).catch(s => { });
      }
    }
  })
</script>

⚠️ 这里遇到一个小问题，就是通过编程事件导航的<a>链接重复点击报错：NavigationDuplicated

原来是vue-router的一个问题，3.*版本中引入了promise时也引入了这个bug，如果路由没变化（重复）就会抛出一个异常的promise。v4.*版本都出来了，这个bug还没修复！<router-link>正常，只有导航编程才会。

🟢解决方法：

判断一下当前路由是否已存在。

提供一个空的onAbort回调，或者promise的方式捕获异常。

改造一下VueRouter.prototype的push方法。

3.6、导航守卫-钩子

在导航过程中提供多种守卫（钩子函数），需要注意的是，动态path参数、<keep-alive>都会复用组件，此时组件的生命周期就不完整了，需要根据实际情况选择合适的地方。

✔️router实例-全局钩子守卫	描述
beforeEach(to, from, next)	导航执行前，可通过`next`取消。可用来验证登陆权限，如果没认证则跳转到登陆
beforeResolve(to, from, next)	`beforeEach`执行后，也是前置守卫
afterEach(to, from)	导航已经离开时触发，这里没有next（不可取消路由），因为已经离开了
✔️路由配置记录route-的独有钩子
beforeEnter(to, from, next)	执行路由前调用
✔️Vue组件中新增的-钩子守卫	Vue组件的钩子
beforeRouteEnter(to, from, next)	进入前：组件路由被confirmed（已确认）前，组件还没创建，不能获取`this`
beforeRouteUpdate(to, from, next)	只有动态`path`参数复用组件时才触发，更新当前路由。
beforeRouteLeave(to, from, next)	路由将要离开该组件前触发，`this`可用，`next(false)`可取消。

🔸钩子的参数：(to, from, next)

to: Route：目标路由对象。
from: Route：当前导航路由对象，也是要离开的。
next: Function：本次路由怎么执行？内置的回调，必须调用。
- nex()/next(true)：允许执行，并继续，全部钩子执行完毕，导航状态为confirmed（已确认）。
- next(false)：🚫不执行，中断当前导航，重置导航到from。
- next({route})：❗中断当前导航，并进行一个新的导航到route。
- 特殊next(callback)：beforeRouteEnter的next接收一个回调函数，参数为组件vm，可用来请求一些ajax数据，回调会在组件创建后调用。

🟢导航守卫-钩子的生命周期流程图，守卫钩子测试代码： CodePen

🔸使用意见：

如果只是对路由做校验或逻辑处理，建议用路由的全局钩子守卫beforeEach，若只是针对某个特定路由，则用路由记录的独有钩子beforeEnter。
如果是需要基于组件做一些操作，如数据加载、未保存提示，则用Vue组件的路由守卫钩子。
在复用组件时，通过watch监测路由对象$route的变化也是一个途径。

04、vue-router4 区别

函数创建：createRouter({ })，没有之前的类创建了。
mode路由模式：mode没了，变成了函数创建history：createWebHistory()、createWebHashHistory()。

const router = createRouter({
    history:createWebHashHistory() / createWebHashHistory(),
    routes: [],
})

base 放到了上面的创建函数参数里。
实例函数router.onReady() 改为 IsReady()，该方法返回一个 Promise。
<router-view> 支持了插槽v-slot，支持就算了，关键是影响有点大。
- <keep-alive> 和 <transition> 只能通过插槽嵌入到<router-view>里面，不像之前是放到外面的。
- <router-view> 组件的模板也只能通过v-slot + 动态组件来实现了。

<router-view v-slot="{ Component }">
    <transition>
        <keep-alive>
            <component :is="Component" />
        </keep-alive>
    </transition>
</router-view>

<router-link>的tag 没了，通过插槽实现。
所有的导航现在都是异步的。

05、其他问题

❓如何构建多级菜单的导航？基本思路：

首先是路由菜单数据，应该是后台数据库统一管理，包括菜单名称、编码、图标、路径path、上下级结构信息等等。
菜单是多级的，这由功能架构来决定，路由还是一级的，因为视图区域是一致的。so，从上述数据中构建2份数据，一份实现多级Dom菜单，另外一份构建路由配置数据。

❓多标签怎么实现，可以管理使用多个标签？基本思路：

首先要记录打开的路由信息，可以通过路由守卫拦截监测。
用一个标签栏来显示这些打开的路由信息，自己实现切换路由即可。
菜单、标签相互联动，标签删除时需按照一定规则路由到下一个标签上。
刷新保存视图状态：vuex存储菜单、标签显示状态。

©️版权申明：版权所有@安木夕，本文内容仅供学习，欢迎指正、交流，转载请注明出处！原文编辑地址-语雀

vue-router路由教程⑵-极简入门