Vue动态路由

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：

现在呢，像 /user/foo 和 /user/bar 都将映射到相同的路由。

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

你可以看看这个 在线例子 。

你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。例如：

除了 $route.params 外， $route 对象还提供了其它有用的信息，例如， $route.query (如果 URL 中有查询参数)、 $route.hash 等等。你可以查看 API 文档 的详细说明。

提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar ， 原来的组件实例会被复用 。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。 不过，这也意味着组件的生命周期钩子不会再被调用 。

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：

或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫 ：

常规参数只会匹配被 / 分隔的 URL 片段中的字符。如果想匹配 任意路径 ，我们可以使用通配符 ( * )：

当使用 通配符 路由时，请确保路由的顺序是正确的，也就是说含有 通配符 的路由应该放在最后。路由 { path: '*' } 通常用于客户端 404 错误。如果你使用了 History 模式 ，请确保 正确配置你的服务器 。

当使用一个 通配符 时， $route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过 通配符 被匹配的部分：

vue-router 使用 path-to-regexp 作为路径匹配引擎，所以支持很多高级的匹配模式，例如：可选的动态路径参数、匹配零个或多个、一个或多个，甚至是自定义正则匹配。查看它的 文档 学习高阶的路径匹配，还有 这个例子 展示 vue-router 怎么使用这类匹配。

有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。

路由权限思路：

1.菜单栏/导航栏(一级权限)

在登录成功后，获取后端的权限数据, 根据权限数据，展示对应的路由导航或菜单即可

2.界面的控制

如果用户没有登录, 用户手动在地址栏输入路由地址，则需要跳转到登录界面.

如果用户已经登录, 用户手动输入的非权限内的路由地址，则给他跳转到404界面.

3.按钮的控制(二级权限)

在页面中，有些账号有: 添加，删除，修改，增加等权限, 有些没有.

没有权限的账号在这个页面只是可以浏览页面中的数据，需要对这些按钮 禁用or隐藏。

4.请求和响应的控制 （这一步其实后端也会根据token判断身份信息, 来返回数据，可以省略）

如果用户通过非常规的手段(可能是同行), 比如通过浏览器f12将禁用的按钮disabled 改成false, 隐藏的按钮apacity:0改成了1，这些按钮就可以使用了，此时需要对按钮点击后发出的请求作出拦截.

login.vue

home.vue (elment-ui)

侧边导航栏

store.js

router.js

动态路需两个地方调用:

1 login.vue 中登录成功后立即执行动态路由函数

2 app.vue中, 在根组件中添加执行动态路由函数，这样每一次用户刷新，就会执行，否则刷新之后，动态路由就没了

思路3：按钮的控制(二级权限): 这里我是通过 自定义指令来实现 对按钮(增,删,改等二级权限按钮) 的显示隐藏。

更简单直接的方式，直接就在html中对button添加v-if显示隐藏即可

import './utils/permission.js' -->main.js中引入文件, 嫌麻烦直接在main.js中写

4 服务器返回状态码401, 代表token超时 or token被串改 or 未传token, 此时强制跳转到登录页重新登录

1、取出非第一级的所有数据

2、映射出所有路由规则

3、添加路由

4、 登录成功后 保存菜单数据，保存后在vuex直接触发添加事件即可 this.commit('add_route')

---