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
const router = new VueR routes: [
{ path: '/', components: { default: Foo, a: Bar, b: Baz } } ] }) 7,重定向:注意并没有应用在跳转路由上,而仅仅应用在其目标上。 8,使用 $route,会与组件高度耦合,使用 props 将组件和路由解耦。 const User = {
props: ['id'], template: 'User { { id }}' } 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'
之类的选项以及任何用在 或 中的选项。next(error)
: (2.4.0+) 如果传入next
的参数是一个Error
实例,则导航会被终止且该错误会被传递给 注册过的回调。
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) // 返回接口返回的错误信息 });