vue路由导航的解析流程

1、导航被触发

2、在失活的组件里调用beforeRouteLeave守卫

3、调用全局beforeEach守卫

4、在重用的组件里调用beforeRouteUpdate守卫

5、在路由配置里调用beforeEnter

6、解析异步路由组件

7、在被激活的组件里调用beforeRouteEnter

8、调用全局吧的beforeResolve守卫

9、导航被确认

10、调用全局的afterEach钩子

11、触发DOM更新

12、调用beforeRouteEnter守卫中传给next的回调函数，创建好的组件实例会作为回调函数的参数传入

方案一：

getDescribe(id) {//   直接调用$routerpush 实现携带参数的跳转

this$routerpush({

path: `/describe/${id}`,

})

方案一，需要对应路由配置如下：

{     path: '/describe/:id',

name: 'Describe',

component: Describe

}

很显然，需要在path中添加/:id来对应 $routerpush 中path携带的参数。在子组件中可以使用来获取传递的参数值。

this$routeparamsid

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

this$routerpush({          name: 'Describe',          params: {            id: id

}

})

对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。

{     path: '/describe',

name: 'Describe',

component: Describe

}

子组件中: 这样来获取参数

this$routeparamsid

父组件：使用path来匹配路由，然后通过query来传递参数

这种情况下 query传递的参数会显示在url后面id=？

this$routerpush({          path: '/describe',          query: {            id: id

}

})

对应路由配置：

{     path: '/describe',

name: 'Describe',

component: Describe

}

对应子组件: 这样来获取参数

this$routequeryid

这里要特别注意 在子组件中 获取参数的时候是$routeparams 而不是

$router 这很重要~~~

权限控制是后台管理系统比较常见的需求，如果我们需要对某些页面的添加权限控制的话，那我们可以在路由管理中的权限做一些校验，没有通过权限校验的给出相应的提示或者直接跳转到报错页面。

跟着我一起来学vue实战篇路由管理权限吧!

getCurrentAuthority()函数用于获取当前用户权限，一般来源于后台数据

check()函数用于权限的校验匹配

isLogin()函数用于检验用户是否登录

路由配置元信息meta:{ authority: ["admin"] }

使用tomatched获取跳转路由的全部信息,包括父路由和子路由

使用lodash中的findLast匹配离跳转路由配置权限的元信息

引入authjs中check()和isLogin()进行判断是否具有权限或是否已登录

如果没有权限则给出提示信息后跳转到403页面,未登录则返回登录页面

运行结果

当getCurrentAuthority()函数返回admin时，则菜单会显示所有元信息meta:{ authority: ["admin"] }的路由菜单；

如返回值为user时，菜单会显示所有元信息meta:{ authority: ["user"] }的路由菜单

接下来CrabFort会带大家一起实现更加精细化的权限设计（权限组件、权限指令）

以上就是关于vue路由导航的解析流程全部的内容，包括:vue路由导航的解析流程、Vue 路由传值的几种方法、Vue实战篇｜使用路由管理用户权限（动态路由）等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！