Vue router

如果在一个模块化工程中使用它, 必须要通过Vue.use()明确地安装路由功能.

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Vue.use(plugin) , 安装Vue.js插件, 该方法需要在调用new Vue()之前被调用,  如果插件是一个对象, 必须提供install方法, 如果插件是个函数, 它会被作为install方法, install方法调用时, 会将Vue作为参数传入, 当install方法被同一个插件多次调用, 插件将只会安装一次.

动态路由匹配

我们经常把某种模式的路由全部映射到同个组件,例如, 我们有一个User组件, 对于所有ID各不相同的用户, 都要使用这个组件来渲染.

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

现在, 像/user/foo和/user/bar都将映射到相同的路由.

一个路径参数使用冒号标记, 当匹配到一个路由时, 参数值会被设置到this.$route.params, 可以在每个组件内使用. 于是, 我们可以输出 当前用户的ID:

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

嵌套路由

一个被渲染组件同样可以包含自己的嵌套<router-view>,  要在嵌套的出口中渲染组件, 需要在VueRouter的参数中使用children配置:

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

编程式导航

除了使用<router-link>创建a标签来定义导航链接, 我们还可以借助router的实例方法, 通过编写代码来实现.

(1) router.push(location, onComplete?, onAbort?)

(2) router.replace(location, onComplete?, onAbort?)

跟router.push很像, 唯一的不同就是, 它不会向history添加新记录.

(3) router.go(n)

在history记录中向前或者向后退多少步.

命名路由

在创建Router实例的时候, 在routes配置中给某个路由设置名称.

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

命名视图

有时想同时展示多个视图, 例如创建一个布局, 有sidebar和main两个视图, 这个时候命名视图就派上用场了.你可以在界面中拥有多个单独命名的视图, 而不只有一个单独的出口. 如果router-view没有设置名字, 那么默认为default.

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

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

https://router.vuejs.org/zh/guide/