vue获取路由详细内容信息方法实例
短信预约 -IT技能 免费直播动态提醒
前言：
vue 中路由（router）的功能就是：把 url 与 应用中的对应的组件进行关联，通过不同的 url 访问不同的组件。但是如果我们想要获取路由中的信息改如何做呢，今天我就给大家详细讲解一下如何获取路由的详细信息。
路由（router）的信息：
routes: [
{
path: '/',
redirect:'login',
name: '登录页',
hidden:true,
component: ()=>import("@/components/Login")
},
{
path: '/login',
name: 'login',
hidden:true,
component: ()=>import("@/components/Login")
},
{
path: '/home',
name: '学生管理',
redirect:'/home/student',
iconClass:'fa fa-users',
component: () => import("@/components/Home"),
children: [
{
path: '/home/student',
name: '学生列表',
iconClass: 'fa fa-list',
component:()=>import('@/components/students/StudentList')
},
{
path: '/home/info',
name: '信息列表',
iconClass: 'fa fa-list-alt',
component:()=>import('@/components/students/InfoList')
},
{
path: '/home/infos',
name: '信息管理',
iconClass: 'fa fa-list-alt',
component:()=>import('@/components/students/InfoLists')
},
{
path: '/home/work',
name: '作业列表',
iconClass: 'fa fa-list-ul',
component:()=>import('@/components/students/WorkList')
},
{
path: '/home/words',
name: '作业管理',
iconClass: 'fa fa-th-list',
component:()=>import('@/components/students/WorkMenu')
},
]
},
{
path: '/home',
name: '数据分析',
redirect:'/home/dataview',
iconClass: 'fa fa-bar-chart',
component: () => import("@/components/Home"),
children: [
{
path: '/home/dataview',
name: '数据概览',
iconClass: 'fa fa-line-chart',
component:()=>import('@/components/dataAnalysis/DataView')
},
{
path: '/home/mapview',
name: '地图概览',
iconClass: 'fa fa-line-chart',
component:()=>import('@/components/dataAnalysis/MapView')
},
{
path: '/home/score',
name: '分数地图',
iconClass: 'fa fa-line-chart',
component:()=>import('@/components/dataAnalysis/ScoreMap')
},
{
path: '/home/travel',
name: '旅游地图',
iconClass: 'fa fa-line-chart',
component:()=>import('@/components/dataAnalysis/TravelMap')
},
]
},
{
path: '/users',
name: '用户中心',
iconClass: 'fa fa-user',
component: () => import("@/components/Home.vue"),
children: [
{
path: '/users/user',
name: '权限管理',
iconClass: 'fa fa-user',
component: () => import("@/components/user/User.vue"),
}
]
},
{
path: '*',
name: 'NotFound',
hidden:true,
component: ()=>import("@/components/NotFound")
},
],
获取路由的所有信息
动态添加路由使用 router.addRoutes(vue-router3.x版本方法，已废弃)
后续使用：router.addRoute(进行动态路由添加)
this.$router.options.routes
获取到的值为：
获取路由中每个信息的单个值
如果想要获取到路由信息中的单个值则代码为：
this.$router.options.routes.map((item) => {
console.log(item.name);
});
获取到的值为：
获取路由中需要显示的值
根据路由信息中 hidden 的值是否为** true** 为 true 则不显示，为 false 则显示
this.$router.options.routes.map((item) => {
if (item.hidden !== true) {
console.log(item.name);
}
});
补充：vue $router和$route的区别
route相当于当前正在跳转的路由对象 可以从里面获取name,path,params,query等
打印this.$route和this.$router
总结：
到此这篇关于vue获取路由详细内容信息的文章就介绍到这了,更多相关vue获取路由内容信息内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
