JavaScript使用路由

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

1. 定义 (路由) 组件， 可以从其他文件 import 进来
2. 定义路由
3. 创建 router 实例，然后传 routes配置
4. 创建和挂载根实例，记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能

动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。

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

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

上例中，像 /user/foo 和 /user/bar 都将映射到相同的路由。
提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
通配符
常规参数只会匹配被 / 分隔的 URL 片段中的字符。如果想匹配任意路径，我们可以使用通配符 ()，路由 { path: '' } 通常用于客户端 404 错误。
当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分。
同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。

嵌套路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件。一个被渲染组件同样可以包含自己的嵌套 <router-view>，需要在 VueRouter 的参数中使用 children 配置。

编程式导航

router.push
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

如果提供了 path，params 会被忽略。
router.replace
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
router.go(n)
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

重定向和别名

“重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b。
/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

{
      // 重定向
      path: '/test-redirect',
      redirect: {name: 'Blog'}
      // redirect: {name: 'LearnRoute'}
    },
    {
      // 别名
      path: '/test-alias',
      component: BlogPage,
      alias: '/b'
    },

参考：https://router.vuejs.org/zh/