vue-router2.x使用入门

组件中的路由


<router-link to=""></router-link>

无参数

<router-link to="/ar/1">测试一</router-link>
<router-link to="/ar/2">测试二</router-link>

与router1.x不同点

在vue-router2.x中使用<router-link的方式,v1.x中使用<a v-link="'/about'">About</a>

带参数

 <router-link to="/ar/1?id=1&age=22">测试一</router-link>
 <router-link to="/ar/2?id=2&age=24">测试二</router-link>

在vue-devtools中可查看到所有的某个路由的所有信息:

路由的重定向

路由的重定向需要我们在路由文件中配置:

new Router({
    ...
    {
      path: '/ar',
      name: 'ar',
      component: Ar
    },{
      path: '/ar/1',
      redirect: '/ar/2', // 配置redirect跳转到测试二
      name: 'ar1',
      component: Ar1
    },{
      path: '/ar/2',
      name: 'ar2',
      component: Ar2
    }
  ]
})

注意:从图中看出,虽然路由发生了跳转,但是后面跟的参数并没有发生变化。

组件内的导航钩子

  • beforeRouteEnter(to, from, next) 进入路由时候触发

  • beforeRouteLeave(to, from, next) 离开路由时候触发

参数含义:

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

注意的点:在我写demo的时候发现,如果你在一个组件这么定义

...
beforeRouteEnter (to, from, next) {

       
},
...

进入路由钩子中什么也不执行next()的话,会一直无法跳转到对应的路由

所以,建议一旦用了组件钩子,就一定不要忘记next!

路由钩子不同于router1.x

  • activate被替换为beforeRouteEnter
  • deactivate被移除,使用beforeDestroy 或者 destroyed钩子作为替代。
  • canActivate被替换为beforeEnter
  • canDeactivate被替换为beforeRouteLeave

嵌套路由

需要嵌套的目录结构:

  • /ar (单独组件)
  • /ar/1 (单独组件)
  • /ar/2 (单独组件)

现在路由文件中配置:

 new Router({
  routes: [
    ...
    {
      path: '/ar',
      name: 'ar',
      component: Ar,
      children:[ // 在ar中添加children子路由
        {
          path: '1',
          name: 'ar1',
          component: Ar1
        },
         {
          path: '2',
          name: 'ar2',
          component: Ar2
        }
      ]
    }
    // ,{
    //   path: '/ar/1',
    //   name: 'ar1',
    //   component: Ar1
    // },{
    //   path: '/ar/2',
    //   name: 'ar2',
    //   component: Ar2
    // }
  ]
})

ar.vue文件:

<template>

    <div>
        Ar下有两个嵌套的子路由
        <router-link to="/ar/1?id=1&age=22">子路由一</router-link>
        <router-link to="/ar/2?id=2&age=24">子路由二</router-link>
        <router-view></router-view>
    </div>
</template>

可见这个单文件中有两个router-view

posted on 2017-05-12 22:06 qize 阅读(...) 评论(...) 编辑 收藏

导航

公告