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() } })

vue-router 重难点总结笔记

猜你喜欢