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
(未完待续···)