vue-router 进阶

简单回顾一下vue基础部分

• 动态路由匹配
  • 路由配置方法

    export default new Router({
      routes: [
        {
          path: '/router01/:name',
          name: 'RainRouter01',
          component: RainRouter01
        }
      ]
    })

  • 路由参数获取方式

    <template>
      <div>{{$route.params.name}}</div>
    </template>

• 嵌套路由
  • 在 VueRouter 的参数中使用 children 配置

    children: [
            {
              path: 'Child01',
              name: 'Child01',
              component: Child01
            }, {
              path: 'Child02',
              name: 'Child02',
              component: Child02
            }
          ]

    注意: 其parent的 template 必须有<router-view>标签

• 路由导航
  • 声明式:  通过<router-link to:>标签的to属性
  • 编程式:
    • router.push()
    • router.replace()
    • go()
• 命名路由
  • 在路由上添加name属性

  • <router-link :to="{ name: 'child01', params: { name:child01}}">User</router-link>

    或者

  • router.push({ name: 'child02', params: { name: child02 }})

    的方式 为路由传递参数

• 命名视图

• <router-view></router-view>
  <router-view  name="child"></router-view>
  <router-view name="b"></router-view

  {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
  }

  • 通过视图的name 属性完成同一个路由下的多个组件  注意:components  而不是component　　

• 重定向和别名
  • 重定向 通过配置 redirect实现
  • 别名 通过alias 属性实现

现在开始进阶方面的讲解

1. 导航钩子

2. beforeRouteEnter
   beforeRouteUpdate (2.2 新增)
   beforeRouteLeave

   每个钩子函数都有三个参数

   to: Route: 即将要进入的目标 路由对象
   
   from: Route: 当前导航正要离开的路由
   
   next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
   
       next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。
   
       next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。
   
       next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。