vue-router一些用法和笔记

[chenyinkai]

动态路由配置方法

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

获取路由参数

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

嵌套路由

在 VueRouter 的参数中使用 children 配置，注意: 其parent的 template 必须有 router-view 标签

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

路由导航

• 声明式：<router-link to:></router-link> 通过路由标签中的 to 属性

• 编程式：

  1. `router.push()` //会产生历史记录
  2. `router.replace()` //无历史记录
  3. `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
    }
}

重定向和别名

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

导航钩子

beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

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