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:路由传参数:如果提供了 pathparams 会被忽略

    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: truename: '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, 完整的导航解析流程

  1. 导航被触发。
  2. 在失活的组件里调用离开守卫。
  3. 调用全局的 beforeEach 守卫。
  4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
  5. 在路由配置里调用 beforeEnter
  6. 解析异步路由组件。
  7. 在被激活的组件里调用 beforeRouteEnter
  8. 调用全局的 beforeResolve 守卫 (2.5+)。
  9. 导航被确认。
  10. 调用全局的 afterEach 钩子。
  11. 触发 DOM 更新。
  12. 用创建好的实例调用 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) // 返回接口返回的错误信息
});

上一篇:SSH整合缓存之-Memcached作为hibernate的二级缓存


下一篇:jquery的2.0.3版本源码系列(3):96行-283行,给JQ对象,添加一些方法和属性