vue-router 踩坑

vue-router 填坑心得

跳转路由的方法

• router-link标签
• router.push(location, onComplete?, onAbort?) js去做
• router.replace 区别是不添加history记录
• 当然了a标签也是可以的
  除了嵌套路由，有时候还可以这样

<router-view class="view one">router-view>
<router-view class="view two" name="a">router-view>
<router-view class="view three" name="b">router-view>

所以，不要小看路由的name属性

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

重定向与别名

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

别名:
/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

beforeRouteEnter

路由拦截，A->B,一般是在B页面中设置，和data平级，可以做一些处理