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 VueRroutes: [
{
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的toprop 或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) // 返回接口返回的错误信息
});