vue 路由

2020-07-12 本文已影响0人 BlinglingSam

动态路由

使用动态路由配置的（如：‘：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。

$router和$ route的区别

前者是全局路由对象，后者是当前路由。

嵌套路由

要注意，以 / 开头的嵌套路径会被当作根路径。使我们充分的使用嵌套组件而无须设置嵌套的路径。

编程式路由

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

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

命名视图

同个路由多个视图：如果 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>

导航守卫

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

　　router.beforeResolve   在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后11，

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访问组件实例 }) }

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

//http request拦截器
authedAxios.interceptors.request.use((request) => {
  let res = checkSession()
  console.log('未获取到token,先获取token')
  let token = storage.get('userToken')
  // request.headers['userId'] = token.userId
  request.headers['Authorization'] = `Bearer ${token}`
  return request
}, (err) => {
  // 请求发生错误
  if (err) {
    console.log(err)
    toast.show(err.message)
    return Promise.reject(err)
  }
})

// //http response拦截器
authedAxios.interceptors.response.use((response) => {
  let result = response.data
  if (result.success) {
    return Promise.resolve(result)
  }
  const message = result.message
  toast.show(`操作失败！${message}`)
  return Promise.reject(result)
},(responseError) => {
  if (responseError) {
    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) // 返回接口返回的错误信息
})

完整的导航解析流程

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