vue router動(dòng)態(tài)路由設(shè)置參數(shù)可選問題
在日常工作中，我們需要將匹配到的所有路由，映射到一個(gè)組件上。
如下代碼想要達(dá)到的效果：
不傳page和id，則映射到user默認(rèn)list頁面
傳page和id，根據(jù)page不同，顯示不同的頁面
問題
使用以下代碼片段是不能實(shí)現(xiàn)以上效果的，因?yàn)槟J(rèn)情況下page和id參數(shù)是必傳的，如果不傳參數(shù)，則會(huì)根據(jù)默認(rèn)路由跳轉(zhuǎn)到home頁面
new Router({
routes: [
{
path: '/user/:page/:id',
name: 'User',
component: () => import('pages/user')
},
{
path: '*',
redirect: '/home'
}
]
})
解決方法
參數(shù)配置改成可選的
path: '/user/:page?/:id?'
ps：下面看下vue-router 動(dòng)態(tài)添加 路由
動(dòng)態(tài)添加路由可以用了做權(quán)限管理。登錄后服務(wù)器端返回權(quán)限菜單，前端動(dòng)態(tài)添加路由 然后在設(shè)置菜單
1、vue-router 有方法router.addRoutes(routes) 動(dòng)態(tài)添加更多的路由規(guī)則。參數(shù)必須是一個(gè)符合 routes 選項(xiàng)要求的數(shù)組。
使用方法
this.$router.options.routes[0].children.push({//插入路由
name:'list',
path: 'list',
component: resolve => require(['../template/list.vue'], resolve)//將組件用require引進(jìn)來
});
this.$router.addRoutes(this.$router.options.routes);//調(diào)用addRoutes添加路由
我的路由文件:
export default new Router({
routes: [
{
path: '/',
component: index,
},
{
path: '/login',
name: 'login',
component: login
}
]
總結(jié)
以上所述是小編給大家介紹的vue router動(dòng)態(tài)路由設(shè)置參數(shù)可選問題，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
- vue?router進(jìn)行路由跳轉(zhuǎn)并攜帶參數(shù)的實(shí)例詳解(params/query)
- Vue中$router.push()路由切換及如何傳參和獲取參數(shù)
- vue-router路由傳參及隱藏參數(shù)問題
- vue-router如何實(shí)時(shí)動(dòng)態(tài)替換路由參數(shù)(地址欄參數(shù))
- Vue3使用vue-router如何實(shí)現(xiàn)路由跳轉(zhuǎn)與參數(shù)獲取
- 如何處理vue router 路由傳參刷新頁面參數(shù)丟失
- vue-router路由參數(shù)刷新消失的問題解決方法
- 詳解vue-router2.0動(dòng)態(tài)路由獲取參數(shù)
- Vue Router中獲取路由傳遞過來的參數(shù)(方法詳解)
相關(guān)文章
多個(gè)vue項(xiàng)目復(fù)用一個(gè)node_modules的問題
這篇文章主要介紹了多個(gè)vue項(xiàng)目復(fù)用一個(gè)node_modules的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue實(shí)現(xiàn)阻止瀏覽器記住密碼功能的三種方法
本文主要介紹了Vue實(shí)現(xiàn)阻止瀏覽器記住密碼功能的三種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
element-ui 表格sortable排序手動(dòng)js清除方式
這篇文章主要介紹了element-ui 表格sortable排序手動(dòng)js清除方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了Vue.js常用指令的使用，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-06-06
vue內(nèi)置組件transition簡單原理圖文詳解(小結(jié))
這篇文章主要介紹了vue內(nèi)置組件transition簡單原理圖文詳解(小結(jié)),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
這篇文章給大家介紹了在Vue 中如何模塊化使用 Vuex,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了React和Vue中監(jiān)聽變量變化的方法,本文通過一個(gè)場(chǎng)景，父組件傳遞子組件一個(gè)A參數(shù)，子組件需要監(jiān)聽A參數(shù)的變化轉(zhuǎn)換為state，具體內(nèi)容詳情大家跟隨小編一起通過本文學(xué)習(xí)吧2018-11-11
Axios?是一個(gè)簡單的基于?promise?的?HTTP?客戶端，適用于瀏覽器和?node.js。Axios?在具有非?？蓴U(kuò)展的接口的小包中提供了一個(gè)簡單易用的庫，這篇文章主要介紹了vue3-HTTP請(qǐng)求之a(chǎn)xios,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了在vue中設(shè)置滾動(dòng)條的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細(xì)介紹了pinia，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-02-02