vue獲取路由詳細內(nèi)容信息方法實例
更新時間：2022年12月19日 09:17:17 作者：清風(fēng)?與我
獲取路由詳細內(nèi)容信息是我們?nèi)粘ｉ_發(fā)中經(jīng)常會遇到的需求,下面這篇文章主要給大家介紹了關(guān)于vue獲取路由詳細內(nèi)容信息的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
前言：
vue 中路由（router）的功能就是：把 url 與 應(yīng)用中的對應(yīng)的組件進行關(guān)聯(lián)，通過不同的 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: '學(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: '分數(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(進行動態(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相當于當前正在跳轉(zhuǎn)的路由對象 可以從里面獲取name,path,params,query等
打印this.$route和this.$router
總結(jié)：
到此這篇關(guān)于vue獲取路由詳細內(nèi)容信息的文章就介紹到這了,更多相關(guān)vue獲取路由內(nèi)容信息內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
關(guān)掉vue插件Vetur格式化的時候自動添加的樣式操作
這篇文章主要介紹了關(guān)掉vue插件Vetur格式化的時候自動添加的樣式操作，文章圍繞主題展開操作過程，需要的小伙伴可以參考一下，希望對你有所幫助2022-05-05
虛擬DOM的概念是通過狀態(tài)生成一個虛擬節(jié)點樹，然后使用虛擬節(jié)點樹進行渲染。在渲染之前，會使用新生成的虛擬節(jié)點和上一次生成的虛擬節(jié)點進行對比，只渲染不同的部分2022-08-08
解決vue單頁面應(yīng)用中動態(tài)修改title問題
這篇文章主要介紹了解決vue單頁面應(yīng)用中動態(tài)修改title問題,本文通過示例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
Vue輪播圖組件的封裝可通過封裝組件、使用插件、配置化等方式實現(xiàn)，主要包括圖片預(yù)加載、定時輪播、無限滾動、手勢滑動、響應(yīng)式布局等功能，實現(xiàn)方式可使用Vue的生命周期函數(shù)、自定義事件、計算屬性等技術(shù)2023-04-04
如何修改element-ui日期下拉框datetimePicker的背景色樣式
這篇文章主要介紹了修改element-ui日期下拉框datetimePicker的背景色樣式的操作代碼,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07
單頁面應(yīng)用的一個問題就是首頁加載東西過多，加載時間過長。特別在移動端，單頁面應(yīng)用的首屏加載優(yōu)化更是繞不開的話題，這篇文章主要介紹了vue項目首屏加載時間優(yōu)化實戰(zhàn)，感興趣的小伙伴們可以參考一下2019-04-04
在之前的一個小項目中,用到的顯示當?shù)氐牡貓D功能,下面這篇文章主要給大家介紹了關(guān)于Vue項目中使用百度地圖api的詳細步驟,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-10-10
本篇文章主要介紹了vue-router路由的使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
由于Vue多個狀態(tài)分散的跨越在許多組件和交互間各個角落，大型應(yīng)用復(fù)雜度也經(jīng)常逐漸增長。為了解決這個問題，Vue提供了vuex。本文將詳細介紹Vue狀態(tài)管理vuex,需要的朋友可以參考下2020-02-02
layer.js(mobile)是一個小巧方便的彈出層插件，在之前的apicloud項目中被大量使用，但最近對apicloud的IDE、非常不友好的文檔和極低的開發(fā)效率深感厭煩，決定棄用然后轉(zhuǎn)向Vue開發(fā)。這篇文章主要介紹了vue-cli腳手架引入彈出層layer插件的幾種方法，需要的朋友可以參考下2019-06-06