Vue Router 初探（一）

Vue Router 作用：
将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。

router-link
使用 router-link 组件来导航，通过传入 to 属性指定链接.

<router-link to="/foo">Go to Foo</router-link>

官方解释：<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。通过 to 属性指定目标地址，默认渲染成带有正确链接的标签
链接：https://router.vuejs.org/zh/a...

router-view
通过 router-view 将对应路由匹配到的组件进行渲染。简言之，router-view 可以定制你的路由组件显示的位置

<router-view></router-view>

官方解释：<router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>，根据嵌套路径，渲染嵌套组件。
链接：https://router.vuejs.org/zh/a...

路由注入：
1.定义路由组件（组件具体内容）
组件名需要与路由定义的地方一样，方便路由查找对应组件

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

2.定义路由匹配的组件
路由数组，一般由路径与组件组成一个对照表

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

3.创建路由实例🌰

const router = new VueRouter({
  routes // 还可以传别的配置参数
})

4.挂载路由到根实例

const app = new Vue({
  router   // 要通过 router 配置参数注入路由
})

挂载完就可以使用啦

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

this.$route.params.xxx  // xxx 是你当前页面路由的一个参数

动态路由匹配
这里我只列举几个最常用的：

对于路由 /foo?user=1，则 $route.query.user === 1

this.$route.query

获取当前路由路径：

this.$route.path

获取当前路由冒号后的参数值：

this.$route.params

当前路由(带 #)的 hash 值：

$route.hash

响应路由参数的变化
从 /user/foo 导航到 /user/bar，原来的组件实例会被复用，而无需销毁再创建。这也意味着组件的生命周期钩子不会再被调用

若想对路由参数的变化作出响应：
1.可以简单地 watch (监测变化) $route 对象：

watch: {
    $route(to, from) {
      // 对路由变化作出响应...
    }
  }

2.使用导航守卫

beforeRouteUpdate(to, from, next) {
    // react to route changes...
    // don't forget to call next()
}

to: Route: 即将要进入的目标路由对象;
from: Route: 当前导航正要离开的路由;
next: Function: 该方法用来 resolve 这个钩子（一定要调用）
详见：https://router.vuejs.org/zh/g...

捕获所有路由/404
常规参数下只会匹配被 / 分隔的 URL。匹配任意路径，使用通配符 (*)

{
  path: '*'  // 会匹配所有路径
}
{
  path: '/user-*'   // 会匹配以 `/user-` 开头的任意路径
}

同一个路径可以匹配多个路由，路由定义得越早，优先级就越高。