vue 如何获取路由详细内容信息

Posted 2023-04-05 清风 与我

目录

• 前言：
• 路由（router）的信息：
• 获取路由的所有信息
• 获取路由中每个信息的单个值
• 获取路由中需要显示的值
• 总结：

前言：

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 如何获取路由信息的讲解和代码，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog

Vue路由器上的可选参数

【中文标题】Vue路由器上的可选参数

【英文标题】：Optional Parameter on Vue Router

【发布时间】：2019-09-14 03:31:19

【问题描述】：

所以我有一个项目页面，当我点击一个项目时，我想转到该项目的项目详细信息页面。所以我正在使用动态路线。我作为参数传递了一个名称（将显示在 URL 上）和 Id（我用来去我的商店并获取项目，这个 Id 没有显示在 URL 上）。一切正常，问题是当我在项目详细信息页面中加载浏览器时，我只获取名称作为参数并且我无法获取 Id，因此我无法将 Id 与我的 vuex 匹配，因为没有 Id。

这是我在父节点上的路由器链接

<router-link class="project__icon" :project="project" :to=" name: 'projectDetail', params: name: project.name.replace(' ', ''), id: project.id ">

这就是我在其他页面上所做的以在 Vuex 中获取我的项目 ID

const projectId = this.$route.params.id; 
    this.project = this.$store.getters.getProject(projectId);

这是我点击路由器时得到的

http://localhost:8080/project/myprojectName

在我的路由器文件中我有这个

 path: '/project/:name',
 name: 'projectDetail',
 component: ProjectDetail,
,

【参考方案1】：

我不确定您为什么将project 绑定到router-link，这不是必须的。

<router-link class="project__icon" :to=" name: 'projectDetail', params: name: project.name.replace(' ', ''), id: project.id ">

您需要将:id 作为参数添加到您的路由中。您可以使用? 将其标记为可选。

 path: '/project/:name/:id?',
 name: 'projectDetail',
 component: ProjectDetail,

另外，如果您设置props: true，您可以将您的组件与路由器解耦，而不是使用this.$route.params.id，您的详细组件将接收参数作为道具。

 path: '/project/:name/:id?',
 name: 'projectDetail',
 component: ProjectDetail,
 props: true,

编辑：如果您想允许刷新并仍然保留 id，则必须在 url 中包含 id，或者您必须将其存储在 localstorage 或 sessionstorage 之类的地方。

【讨论】：

实际上它可以工作，但我每次点击路由器时都会得到 id。 ``` localhost:8080/project/myprojectName/0 ``` 其实我找到了解决方案，不知道为什么，很简单，我只需要``` this.project.id ``` 还是不知道这是怎么回事因为我正在刷新组件内的页面，但组件本身已经知道该项目。感谢您的帮助