Vue Router 知识点梳理

Posted 2020-12-05 lemonmonster

 

　　1.使用步骤：

　　　　a. 使用模块化机制编程，导入Vue和VueRouter，调用 Vue.use(VueRouter)；

　　　　b. 定义 (路由) 组件；

　　　　c. 定义路由routes；

　　　　d. 创建 router 实例，然后传 `routes` 配置；

　　　　e. 创建和挂载根实例。

　2.通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由；

  3.this.$router 和 router 使用起来完全一样。我们使用 this.$router 的原因是我们并不想在每个独立需要封装路由的组件中都导入路由；

　4.当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用；

  5.复用组件时，想对路由参数的变化作出响应的话，可以简单地 watch (监测变化) $route 对象，或者使用 2.2 中引入的 beforeRouteUpdate 守卫；

  6.有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高；

  7.要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置；
　
　8.要注意，以 / 开头的嵌套路径会被当作根路径；

  9.当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)；

 10.路由导航中，如果提供了 path，params 会被忽略；

 11.如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)；

 12.router.go(1)的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n);

 13.有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称;

 14.有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了;

 15.你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default

 (未完待续···)