【vue】路由

【路由】

1.路由：

    { path: '/user/:id', component: User }   组件内通过this.$route.params访问 

2.嵌套路由

3.路由导航

 编程式路由this.router.push （name，params：参数/query：参数对象  
 声明式 router-link 

4.命名视图 components里面视图名称：组件名称 然后在router-view中添加对应name属性，可以一个路由对应多个视图

5. 路由守卫

5.1导航守卫

全局前置守卫

router.beforeEach((to, from, next) => {
   if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

全局解析守卫 router.beforeResolve
全局后置勾子

 router.afterEach((to, from) => {
   
 })
 ```
##### 5.2路由私有守卫内部 beforeEnter 
##### 5.3组件内部守卫
```js
    beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
   },
   beforeRouteUpdate (to, from, next) {
     // 在当前路由改变，但是该组件被复用时调用
     // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
     // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    },
    beforeRouteLeave (to, from, next) {
     // 导航离开该组件的对应路由时调用
     // 可以访问组件实例 `this`
     }
  ```