vue动态路由及案例

在此之前遇到的都是一个路径对应一个组件的情况，但有时我们会遇到多个路径对应一个组件的情况。

比如个人中心对应一个 User 组件，学员登录个人中心时，由于大家的 id 各不相同，所以个人中心的路径可能会不同，像 /user/123、/user/456 这样，但其实页面会使用同一个 User 组件来渲染。

这里的 123和456 指的是用户 id，也就是在路径中添加的参数。

像这种多个路径都映射到一个组件这种情况就属于动态路由。

动态路由

动态路由即符合某种模式的多个路径映射到同一个组件，动态路由的写法：

import User from "./views/User.vue";

const routes = [
  // id 就是路径参数
  {
    path: '/user/:id', component: User }
]

id 为路径参数，一个“路径参数”前需要使用冒号 ： 标记。
当 url 匹配到路由中的一个路径时，参数值会被设置到 this.$route.params 里，可以在组件内读取到。
比如 /user/456 匹配的就是 /user/:id，那么这个用户的 id 就是 456，this.$route.params.id 的值就是 456。

现在我们在 User 的模板，输出当前用户的 id：

<template>
  <div>user id: {
   {
    $route.params.id }}</div>
</template>

捕获 404 页面

当用户输入的 url 不属于我们注册的任何一个路由时，我们常需要将页面用 404 NotFound 组件渲染，这里我们可以用通配符(*)来匹配任意路径：

import NotFound from "./views/NotFound.vue";

const routes = [
  {
   
    // 会匹配所有路径
    path: '*',
    component: NotFound
  }
]

当使用通配符路由时，请确保含有通配符的路由应该放在最后。因为路由的匹配通常是根据注册的顺序匹配的，如果 path: ‘*’ 路由放在最前面，那么所有的页面都会因为先匹配到通配符路由而由 NotFound 组件渲染。

如何读取匹配到的路径值

当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 的参数。
它包含了 URL 通过通配符被匹配的部分，比如用上面的路由 { path: ‘*’ } 匹配 URL http://localhost:8081/non-existing/file：

this.$route.params.pathMatch // '/non-existing/file'

案例：
router/index.js

// 0. 使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
import Vue from 'vue';
import