vue获取路由详细内容信息方法实例

更新时间：2022年12月19日 09:17:17 作者：清风与我

获取路由详细内容信息是我们日常开发中经常会遇到的需求,下面这篇文章主要给大家介绍了关于vue获取路由详细内容信息的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

前言：

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获取路由内容信息内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解vue-router 路由元信息

关掉vue插件Vetur格式化的时候自动添加的样式操作
这篇文章主要介绍了关掉vue插件Vetur格式化的时候自动添加的样式操作，文章围绕主题展开操作过程，需要的小伙伴可以参考一下，希望对你有所帮助
2022-05-05
Vue虚拟DOM详细介绍
虚拟DOM的概念是通过状态生成一个虚拟节点树，然后使用虚拟节点树进行渲染。在渲染之前，会使用新生成的虚拟节点和上一次生成的虚拟节点进行对比，只渲染不同的部分
2022-08-08
解决vue单页面应用中动态修改title问题
这篇文章主要介绍了解决vue单页面应用中动态修改title问题,本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-06-06
Vue实现轮播图组件的封装
Vue轮播图组件的封装可通过封装组件、使用插件、配置化等方式实现，主要包括图片预加载、定时轮播、无限滚动、手势滑动、响应式布局等功能，实现方式可使用Vue的生命周期函数、自定义事件、计算属性等技术
2023-04-04
如何修改element-ui日期下拉框datetimePicker的背景色样式
这篇文章主要介绍了修改element-ui日期下拉框datetimePicker的背景色样式的操作代码,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-07-07
vue项目首屏加载时间优化实战
单页面应用的一个问题就是首页加载东西过多，加载时间过长。特别在移动端，单页面应用的首屏加载优化更是绕不开的话题，这篇文章主要介绍了vue项目首屏加载时间优化实战，感兴趣的小伙伴们可以参考一下
2019-04-04
Vue项目中使用百度地图api的详细步骤
在之前的一个小项目中,用到的显示当地的地图功能,下面这篇文章主要给大家介绍了关于Vue项目中使用百度地图api的详细步骤,文中通过图文介绍的非常详细,需要的朋友可以参考下
2022-10-10
vue-router路由简单案例介绍
本篇文章主要介绍了vue-router路由的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
Vue的状态管理vuex使用方法详解
由于Vue多个状态分散的跨越在许多组件和交互间各个角落，大型应用复杂度也经常逐渐增长。为了解决这个问题，Vue提供了vuex。本文将详细介绍Vue状态管理vuex,需要的朋友可以参考下
2020-02-02
vue-cli脚手架引入弹出层layer插件的几种方法
layer.js(mobile)是一个小巧方便的弹出层插件，在之前的apicloud项目中被大量使用，但最近对apicloud的IDE、非常不友好的文档和极低的开发效率深感厌烦，决定弃用然后转向Vue开发。这篇文章主要介绍了vue-cli脚手架引入弹出层layer插件的几种方法，需要的朋友可以参考下
2019-06-06