路由之间传值及路由守卫

路由守卫

路由守卫分为以下几种：
全局守卫：beforeEach（是路由的钩子函数，在每一个路由跳转之前执行，常做登录权限判断，参数to，from，next）
后置守卫：afterEach（在跳转之后执行，参数to和from）
全局解析守卫：beforeResolve（参数to，from和next，在beforeEach之后，afterEach之前）
路由独享守卫：beforeEnter
组内路由守卫：beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next参数
next()//直接进to 所指路由
next(false) //中断当前路由
next(‘route’) //跳转指定路由
next(‘error’) //跳转错误路由
beforeResolve
router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用
beforeRouteLeave
离开该组件时调用
可以访问this
通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消
beforeRouteUpdate
路由动态参数改变，组件被复用时调用（/user/1=>1/user/2）
可以调用this

路由导航解析流程

路由导航开始
在当前路由调用beforeRouterLeave
调用beforeEach
在重用组件中调用beforeRouteUpdate
调用beforeEnter
解析异步路由组件
在被激活的路由组件里调用beforeRouteEnter
调用beforeResolve
导航被确认
调用全局的afterEach
触发DOM更新

路由传值

1. 父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数
   使用params传参的时候需要注意参数的名字，需要在路由表中做配置，如果不在路由中进行配置也可以进行传递，在router-link中设置也可以进行传递。在router-link中设置需要传递的参数：如果使用to+path（eg：to=‘字符串’）进行跳转，需要传递的参数是必须在路由表中进行配置的（因为这一种只能对应路由表中的path）；如果使用:to绑定一个对象传递参数，那么多余的参数可以不用进行配置（这一种可以是name，对应路由表中的name），直接传递。在获取参数的时候用this.$route.params进行获取。this.$router.push({
   name: ‘aa’,
   params: {
   id: id
   }
   })
   对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。
   {
   path: ‘/aa’,
   name: ‘aa’,
   component: aa
   }
   另一种
   this.$router.push({
   path: /aa/ ${id},
   })
   需要对应路由配置如下：
   {
   path: ‘/aa/:id’,
   name: ‘aa’,
   component: aa
   }
2. 使用query传参，query中的参数直接在url中进行拼接（以？形式）
   在获取参数的时候用this.$route.query获取通过url中传递的参数this.$router.push({
   path: ‘/aa’,
   query: {
   id: id
   }
   })
   路由表中应配置
   {
   path: ‘/aa’,
   name: ‘aa’,
   component: aa
   }
   对应子组件: 这样来获取参数
   this.$route.query.id