vue取动态路由的值
在本文中，我们将探讨vue取动态路由的值，并提供一些实用的技巧和建议，希望对您有所帮助。
本文内容目录一览：
vue 动态获取当前路由信息
vue 动态获取当前route路由信息
watch: {
$route: {
handler:function(route){
console.log(route)
},
immediate:true
}
},
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 怎么使用这类匹配。
有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。
vue项目 动态路由怎么做
vue项目实现 动态路由 的方式大体可分为两种:
前端这边把路由写好，登录的时候根据用户的角色权限来动态展示路由，(前端控制路由)
详情可参阅 花裤衩大佬 的项目 手把手...
后台传来当前用户对应权限的路由表，前端通过调接口拿到后处理(后端处理路由)
这两种方法各有优点，效果都能实现，我们公司是通过第二中种方法实现的，原因就是公司项目里有一个专门的用户中心，里边逻辑很复杂，不好返给前端用户权限，担心路由放到前端不安全(以上的话是公司的后台同学讲的)，那好吧，抱着都试试、锻炼下自己能力的态度，我们搞了第二种方法。
大体步骤：拦截路由-后台取到路由-保存路由到localStorage(用户登录进来只会从后台取一次，其余都从本地取,所以用户，只有退出在登录路由才会更新)
菜单名字menName；
菜单路径menPath；
菜单指向的资源menuUrl(也就是组件地址, 一般从views层级开始写)
前端登录后通过接口请求拿到菜单数据后，
menName --- name
menPath --- path
menuUrl ----components文件
转换时,用到这个方法找组件资源 把 menuUrl 可以变为components的格式，转为组件文件
生成路由表
可以再过滤一遍生成的路由表
下面这个方法找到views底下所有的组件资源
路由表里路由的组件在所有组件资源里没找到时，将该路由的path变为/404
getRouter.push({ path: '*', redirect: '/404', hidden: true });
router.addRoutes(getRouter); //动态添加路由
前置工作：配置项目路由文件，该文件中没有路由，或者存在一部分公共路由，即没有权限的路由
每个路由都使用到组件Layout,这个组件是整体的页面布局:左侧菜单列，右侧页面,所以children下边的第一级路由就是你自己的开发的页面,meta里包含着路由的名字，以及路由对应的icon;
因为可能会有多级菜单，所以会出现children下边嵌套children的情况;
路由是数组格式
实际前端需要的 component是 component: () = import('@/views/content/classify'),
因为有多级路由的出现，所以要写成遍历递归方法，确保把每个component转成组件对象
因为后台传回的是字符串，所以要把加载组件的过程 封装成一个方法，用这个方法在遍历中使用;详情查看项目里的router文件夹下的 _import_development.js和_import_production.js文件
Layout我放的目录跟其他文件的目录不一样，所以我在遍历里单独处理，各位小伙伴可自己调整哈
beforeEach路由拦截，进入判断，如果发现本地没有路由数据，那就利用axios后台取一次，取完以后，利用localStorage存储起来，利用addRoutes动态添加路由，
ps：beforeEach好坏啊，一步小心就进入到了他的死循环，浏览器都tm崩了，得在一开始就加判断，拿到路由了，就直接next()，嘤嘤嘤
global.antRouter是为了传递数据给左侧菜单组件进行渲染
上边第三步会给 global.antRouter赋值，这是一个全局变量（可以用vuex替代），菜单那边拿到路由，进行渲染
通过本文所介绍的方法，您可以轻松地配置路由器和Wi-Fi，并且确保网络连接安全。记得设置一个强密码，并经常更改密码，以免遭到黑客攻击。希望这篇文章能对您有所帮助。
