vue获取路由详细内容信息方法实例
作者:清风?与我 发布时间:2024-06-07 16:01:53
标签: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
总结:
来源:https://blog.csdn.net/weixin_62897746/article/details/128213949
0
投稿
猜你喜欢
- 本文实例讲述了thinkphp3.x连接mysql数据库的方法。分享给大家供大家参考,具体如下:惯例配置文件:ThinkPHP/conf/c
- python 字符串替换 是python 操作字符串的时候经常会碰到的问题,这里简单介绍下字符串替换方法。python 字符串替换可以用2种
- 前言MySQL 服务器正确安装以后,可以通过命令行管理工具或者图形化的管理工具来操作 MySQL 数据库。MySQL 图形化管理工具极大地方
- 介绍本篇文章主要介绍如何爬取麦子学院的课程信息(本爬虫仍是单线程爬虫),在开始介绍之前,先来看看结果示意图怎么样,是不是已经跃跃欲试了?首先
- 用python写了一个简单版本的textrank,实现提取关键词的功能。import numpy as np import jieba im
- PHP中的MYSQL常用函数1、mysql_connect()-建立数据库连接格式:resource mysql_connect([stri
- 本文实例讲述了Python基于xlrd模块操作Excel的方法。分享给大家供大家参考,具体如下:一、使用xlrd读取excel1、xlrd的
- 本文实例讲述了PHP操作MySQL中BLOB字段的方法。分享给大家供大家参考,具体如下:1、MySQL中BLOB字段类型BLOB类型的字段用
- 在上一篇文章中我们提到热拷贝(MySQL备份与恢复之热
- 前言在做项目中,网站前台或者后台有些数据需要在多个视图页面使用,例如用户基本信息数据,菜单展示数据。首先想到的是在每个控制器里传入这些需要的
- 本文实例讲述了Python使用progressbar模块实现的显示进度条功能。分享给大家供大家参考,具体如下:progressbar安装:p
- SOCKET编程socket(套接字):是一个网络通信的端点,能实现不同主机的进程通信, -通过IP+端口定位对方并发送消息的通信机制分为U
- 本文介绍基于Python语言,针对一个文件夹下大量的Excel表格文件,基于其中每一个文件,随机从其中选取一部分数据,并将全部文件中随机获取
- 我就废话不多说了,直接上代码吧!import torchimport torch.nn as nnimport torch.nn.funct
- 目录简单的验证码简单的登录页面我们经常在登录一个网站,或者注册的时候需要输入一个验证码,有时候觉得很烦,因为有些验证码不仅复杂还看不清,许多
- 使用pandas库来读取xlsx格式中的数据。excel中数据:示例代码1:import pandas as pd# data = pd.r
- 一个div的运动其实就是它与浏览器边框的距离在变动。如果他变化的速率一定,那就是匀速运动;如果变化的速率不一定,那么就是变速运动。当,变化率
- 网上搜了很多方法都不奏效,研究了一天,发现通过以下的配置可以完美支持 'URL_MODEL' => 2 的情况了 lo
- 最近因为要使用Python的缘故,安装了python IDE+pycharm,如此安装的原因是因为Pycharn 并不像anaconda一样
- 慢SQL与索引的关系慢SQL优化原则数据库也是应用,MySQL 作为一种磁盘数据库,属于典型的 IO 密集型应用,并且随机 IO 比顺序 I