Vue Router 路由

Vue本体不带路由功能，我们可以自己实现一个简单的路由功能，但是更规范的做法是使用vue-router，它是Vue.js官方提供的。在vue-cli3创建的项目中，可以使用vue add router安装，安装时会提示我们使用的路由方式，可选Hash路由或HistotyAPI路由。

基本使用

let componentA = Vue.component("component-a", {
  template: "<p>component-a</p>"
});
let componentB = Vue.component("component-b", {
  template: "<p>component-b</p>"
});

let router = new VueRouter({
  routes : [
    {path : "/foo", component : componentA},
    {path : "/bar", component : componentB}
  ]
});

new Vue({
  el : "#app",
  router : router
});

上面JavaScript代码中，我们创建了一个VueRouter对象并设置了一些路由参数，最后将router注入到Vue对象。

<div id="app">
    <router-link to="/foo">Foo</router-link>
    <router-link to="/bar">Bar</router-link>

    <router-view></router-view>
</div>

• router-link：改变URL的标签，用于导航，实际上最后渲染结果是个<a></a>标签,to属性配置路由参数
• router-view：真正需要渲染组件的位置，我们自定义的component-a和component-b就加载到这里

任何组件都可以使用this.$router访问路由器，或this.$route访问当前路由。

使用代码切换路由

有时我们需要使用代码手动更改当前路由，这可以通过如下代码实现：

this.$router.replace('/dashboard');

其中，replace()的函数参数是路由值。

读取URL中的参数

例如在一个RESTful的API中，读取一个用户的一个帖子，URL为/user/<用户ID>/post/<帖子ID>，下面例子展示如何把URL中的请求参数读取出来。

let componentPost = Vue.component("component-post", {
  template: "<p>{{this.$route.params.user_id}}{{this.$route.params.post_id}}</p>"
});

组件中，可以使用this.$route.params访问所有请求参数。

routes : [
  {path : "/user/:user_id/post/:post_id", component : componentPost}
]

路由配置中，使用冒号:指定哪些字段是请求参数。

    <router-link to="/user/3/post/6">Post</router-link>

嵌套路由

当需要URL的嵌套层次和组件的嵌套层次进行对应时，这时可以使用嵌套路由。嵌套路由用起来是比较晕的，下面是一个嵌套路由的例子，组件B包含组件A。

let componentA = Vue.component("component-a", {
  template: "<p>component-a</p>"
});
let componentB = Vue.component("component-b", {
  template: "<p>component-b<router-view></router-view></p>"
});

上面代码定义了两个组件，组件B包含组件A。

let router = new VueRouter({
  routes : [
    {
      path : "/foo",
      component : componentB,
      children : [
        {path : "bar", component : componentA}
      ]
    },
  ]
});

上面代码中注册了路由组件，注意路由嵌套的层次，/foo对应大的组件B，/foo/bar对应小的组件A，这种嵌套关系用children数组表示。注意内层路由就不要由/开头了，这个表示项目根目录。

<router-link to="/foo">Foo</router-link>
<router-link to="/foo/bar">Bar</router-link>