Vue Router 知识点梳理

Posted 2020-12-05 lemonmonster

1.命名视图：可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口；

1 <router-view class="view one"></router-view>
2 <router-view class="view two" name="a"></router-view>
3 <router-view class="view three" name="b"></router-view>

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components配置 (带上 s)：

const router = new VueRouter({
  routes: [
    {
      path: ‘/‘,
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

 

2.嵌套视图，需要命名用到的嵌套 router-view 组件：嵌套命名视图

 

3.“重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，也是通过 routes 配置来完成的：

const router = new VueRouter({
  routes: [
    { path: ‘/a‘, redirect: ‘/b‘ }
  ]
})

 

4.“别名”的意思是，/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

 

5.vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

 

6.参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。

 

7.每个守卫方法接收三个参数：

　　to: Route: 即将要进入的目标 路由对象

　　from: Route: 当前导航正要离开的路由

　　next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

8.完整的导航解析流程：

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 的回调函数。

9.当打包构建应用时，javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。