vue-router学习

1vue-router中传参

params和query
如何同时使用params和query:

1. 导航组件中：
   :to="{path:“menu/”+stuNum,query:{key:‘age’}"
   
2. 路由中：routes=[{path:‘menu/id’,component:menu},]
   path为必选项，但是组件中router-link的to所绑定的对象中的属性path不是必选项
3. menu组件中：
   打印this$route
   

2 路由守卫

beforeEach((to,from,next)) 每次跳转路由会执行
afterEach((to,from))
beforeResolve

2. 路由独享守卫

beforeEnter((to,from,next)) 跳转到当前路由才会执行
afterEnter

3.组件守卫

beforeRouteEnter

beforeRouteEnter((to,from,next)=>{
    //拿不到this，因为组件还没创建
    next((vm)=>{
        //注意vm是当前组件实例
        //该回调函数是在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
        
    })
})

beforeRouteUpdate (2.2 新增)
复用路由组件时使用
复用：

beforeRouteUpdate()

beforeRouteLeave((to,from,next)=>{
    //next(false)
    //next({path:'',query:{}})
    //next({'/menu'})
})

beforeRouterLeave
beforeEach
beforeEnter
beforeRouterEnter
导航确认
afterEach

4流程

1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被**的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。
    Q：4中 重用组件流程 4后面不执行了？
    Q: 8是什么意思 7和12的区别

3 路由复用 route-view

复用即一个页面多个router-view，
比如home组件中

<router-view ></router-viw>
<router-view name='a'></router-viw>
<router-view name='b'></router-viw>

routes=[
{name:'home',components:{
  default:home,
  a:compA,
  b:compB}
},]

4路由组件传参