vue-router 重难点总结笔记

1，使用动态路由配置的（如：‘：id’），可以在this.$router.params.id获得。

　　官网例子：

模式	匹配路径	$route.params
/user/:username	/user/evan	`{ username: 'evan' }`
/user/:username/post/:post_id	/user/evan/post/123	`{ username: 'evan', post_id: 123 }`

　　⚠️注意：当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。

　　　　　　不过，这也意味着组件的生命周期钩子不会再被调用。此时可以使用：watch监听$route对象，或者导航守卫beforeRouterUpdate。

2，$router和$route的区别，前者是全局路由对象，后者是当前路由。

3，匹配优先级：谁先定义谁的优先级高。

4，嵌套路由：要注意，以 / 开头的嵌套路径会被当作根路径。这让你充分的使用嵌套组件而无须设置嵌套的路径。

5，编程式路由：

　　a：路由传参数：如果提供了 path，params 会被忽略

　 b：router.replace(location, onComplete?, onAbort?) 不会向 history 添加新记录

　　　router.push(location, onComplete?, onAbort?) 会向 history 添加新记录

　　　onComplete 导航成功完成的回调

　　　onAbort 导航失败的回调

6，命名视图：同个路由多个视图：如果 router-view 没有设置名字，那么默认为 default

　　<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>

　　const router = new VueR  　　routes: [

  　　  {

     　　 path: '/',

    　　  components: {

    　　    default: Foo,

   　　     a: Bar,

     　　   b: Baz

  　　    }
 　　   }

 　　 ]

　　})
7，重定向：注意导航守卫并没有应用在跳转路由上，而仅仅应用在其目标上。
8，使用 $route，会与组件高度耦合，使用 props 将组件和路由解耦。

const User = {

  props: ['id'],

  template: '<div>User {{ id }}</div>'

}

const router = new VueRouter({

  routes: [

    { path: '/user/:id', component: User, props: true },

    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：

    {

      path: '/user/:id',

      components: { default: User, sidebar: Sidebar },

      props: { default: true, sidebar: false }

    }

  ]

})
9，导航守卫：

next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

10，router.beforeEach      当一个导航触发时，全局前置守卫按照创建顺序调用

　　router.beforeResolve   在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后
11，路由独享的守卫：在路由配置上直接定义 beforeEnter 守卫：

const router = new VueRouter({

  routes: [

    {

      path: '/foo',

      component: Foo,

      beforeEnter: (to, from, next) => {

        // ...

      }

    }

  ]

})
12，beforeRouteEnter 守卫 不能 访问 this，update，leave可以访问this。仅仅是beforeRouterEnter支持next传递回调。

beforeRouteEnter 守卫不能访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

beforeRouteEnter (to, from, next) { next(vm => { // 通过 `vm` 访问组件实例 }) }

13， 完整的导航解析流程

导航被触发。
在失活的组件里调用离开守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

14，路由元信息

下面例子展示在全局导航守卫中检查元字段：

router.beforeEach((to, from, next) => {

  if (to.matched.some(record => record.meta.requiresAuth)) {

    // this route requires auth, check if logged in

    // if not, redirect to login page.

    if (!auth.loggedIn()) {

      next({

        path: '/login',

        query: { redirect: to.fullPath }

      })

    } else {

      next()

    }

  } else {

    next() // 确保一定要调用 next()

  }

})

15，vue-router 配合axios拦截器的扫操作

//http request拦截器
axios.interceptors.request.use(
config =>{
debugger
var token = sessionStorage.getItem('token');
if(token){
// 判断是否存在token，如果存在的话，则每个http header都加上token
config.headers.Authorization = 'token ${store.state.token}';
}
return config;
},
err =>{
return Promise.reject(err);
}
)

// //http response拦截器
axios.interceptors.response.use(
response => {
return response;
},
error => {
if (error.response) {
switch (error.response.status) {
case 401:
// 返回 401 清除token信息并跳转到登录页面
store.commit(types.LOGOUT);
router.replace({
path: 'login',
query: {redirect: router.currentRoute.fullPath}
})
}
}
return Promise.reject(error.response.data) // 返回接口返回的错误信息
});

秒客网

vue-router 重难点总结笔记

相关文章