vue獲取路由詳細(xì)內(nèi)容信息方法實例
更新時間：2022年12月19日 09:17:17 作者：清風(fēng)?與我
獲取路由詳細(xì)內(nèi)容信息是我們?nèi)粘ｉ_發(fā)中經(jīng)常會遇到的需求,下面這篇文章主要給大家介紹了關(guān)于vue獲取路由詳細(xì)內(nèi)容信息的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
前言：
vue 中路由（router）的功能就是：把 url 與 應(yīng)用中的對應(yīng)的組件進(jìn)行關(guān)聯(lián)，通過不同的 url 訪問不同的組件。但是如果我們想要獲取路由中的信息改如何做呢，今天我就給大家詳細(xì)講解一下如何獲取路由的詳細(xì)信息。
路由（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: '學(xué)生管理',
redirect:'/home/student',
iconClass:'fa fa-users',
component: () => import("@/components/Home"),
children: [
{
path: '/home/student',
name: '學(xué)生列表',
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: '作業(yè)列表',
iconClass: 'fa fa-list-ul',
component:()=>import('@/components/students/WorkList')
},
{
path: '/home/words',
name: '作業(yè)管理',
iconClass: 'fa fa-th-list',
component:()=>import('@/components/students/WorkMenu')
},
]
},
{
path: '/home',
name: '數(shù)據(jù)分析',
redirect:'/home/dataview',
iconClass: 'fa fa-bar-chart',
component: () => import("@/components/Home"),
children: [
{
path: '/home/dataview',
name: '數(shù)據(jù)概覽',
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: '分?jǐn)?shù)地圖',
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: '權(quán)限管理',
iconClass: 'fa fa-user',
component: () => import("@/components/user/User.vue"),
}
]
},
{
path: '*',
name: 'NotFound',
hidden:true,
component: ()=>import("@/components/NotFound")
},
],
獲取路由的所有信息
動態(tài)添加路由使用 router.addRoutes(vue-router3.x版本方法，已廢棄)
后續(xù)使用：router.addRoute(進(jìn)行動態(tài)路由添加)
this.$router.options.routes
獲取到的值為：
獲取路由中每個信息的單個值
如果想要獲取到路由信息中的單個值則代碼為：
this.$router.options.routes.map((item) => {
console.log(item.name);
});
獲取到的值為：
獲取路由中需要顯示的值
根據(jù)路由信息中 hidden 的值是否為** true** 為 true 則不顯示，為 false 則顯示
this.$router.options.routes.map((item) => {
if (item.hidden !== true) {
console.log(item.name);
}
});
補充：vue $router和$route的區(qū)別
route相當(dāng)于當(dāng)前正在跳轉(zhuǎn)的路由對象 可以從里面獲取name,path,params,query等
打印this.$route和this.$router
總結(jié)：
到此這篇關(guān)于vue獲取路由詳細(xì)內(nèi)容信息的文章就介紹到這了,更多相關(guān)vue獲取路由內(nèi)容信息內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
vue 里面的 $forceUpdate() 強制實例重新渲染操作
這篇文章主要介紹了vue 里面的 $forceUpdate() 強制實例重新渲染操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了淺談Vue路由快照實現(xiàn)思路及其問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
vue3中reactive和ref的實現(xiàn)與區(qū)別詳解
reactive和ref都是vue3實現(xiàn)響應(yīng)式系統(tǒng)的api,他們是如何實現(xiàn)響應(yīng)式的呢,reactive和ref又有什么區(qū)別呢,下面小編就來和大家詳細(xì)講講,希望對大家有所幫助2023-10-10
Vue2+Element-ui實現(xiàn)el-table表格自適應(yīng)高度的案例
這篇文章主要介紹了Vue2+Element-ui實現(xiàn)el-table表格自適應(yīng)高度的案例,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06
這篇文章主要為大家詳細(xì)介紹了基于vue實現(xiàn)簡易打地鼠游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要介紹了vue實現(xiàn)城市列表選擇功能，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07
vue中實現(xiàn)路由跳轉(zhuǎn)的三種方式超詳細(xì)教程
這篇文章主要介紹了vue中實現(xiàn)路由跳轉(zhuǎn)的三種方式超詳細(xì)教程，其中聲明式router-link實現(xiàn)跳轉(zhuǎn)最簡單的方法，可用組件router-link來替代a標(biāo)簽，每種方式給大家講解的非常詳細(xì)需要的朋友可以參考下2022-11-11
3分鐘搞定vite項目(vue/react)使用vite-plugin-pwa配置為pwa應(yīng)用
這篇文章主要介紹了3分鐘搞定vite項目(vue/react)使用vite-plugin-pwa配置為pwa應(yīng)用,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-02-02
這篇文章主要介紹了vue-quill-editor如何設(shè)置字體大小，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue Axios異步與數(shù)據(jù)類型轉(zhuǎn)換問題淺析
總的來說這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達(dá)的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過程。希望通過這道題能給你帶來一種解題優(yōu)化的思路，Axios是一個開源的可以用在瀏覽器端和Node JS的異步通信框架，主要作用就是實現(xiàn)AJAX異步通信2023-01-01