vue router動(dòng)態(tài)路由設(shè)置參數(shù)可選問題

更新時(shí)間：2019年08月21日 16:12:56 作者：一米陽光

這篇文章主要介紹了vue-router動(dòng)態(tài)路由設(shè)置參數(shù)可選，文中給大家提到了vue-router 動(dòng)態(tài)添加路由的方法,需要的朋友可以參考下

在日常工作中，我們需要將匹配到的所有路由，映射到一個(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ù)大家的！

您可能感興趣的文章:

相關(guān)文章

vue-cli3單頁構(gòu)建大型項(xiàng)目方案
這篇文章主要介紹了vue-cli3單頁構(gòu)建大型項(xiàng)目方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04
vue引用json文件的方法小結(jié)
這篇文章主要介紹了vue引用json文件,解決怎么從控制臺(tái)把數(shù)據(jù)移到j(luò)son文件中，只需要直接右擊復(fù)制值即可，需要的朋友可以參考下
2022-09-09
vue-router路由簡(jiǎn)單案例介紹
本篇文章主要介紹了vue-router路由的使用詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-02-02
vue.js中ref及$refs的使用方法解析
這篇文章主要介紹了vue.js中ref及$refs的使用方法解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-10-10
vue3子組件上綁定(v-model="xx")父組件傳過來的值后報(bào)錯(cuò)解決
這篇文章主要給大家介紹了關(guān)于vue3子組件上綁定(v-model="xx")父組件傳過來的值后報(bào)錯(cuò)解決辦法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2023-07-07
vue2.0的虛擬DOM渲染思路分析
vue2.0采用了虛擬DOM來代替對(duì)真實(shí)DOM的操作，最后通過某種機(jī)制來完成對(duì)真實(shí)DOM的更新，渲染視圖。這篇文章主要介紹了vue2.0的虛擬DOM渲染,需要的朋友可以參考下
2018-08-08
vue和thymeleaf相結(jié)合的注意事項(xiàng)詳解
這篇文章主要介紹了vue和thymeleaf相結(jié)合的注意事項(xiàng)詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11
淺談Vue2.4.0 $attrs與inheritAttrs的具體使用
這篇文章主要介紹了淺談Vue2.4.0 $attrs與inheritAttrs的具體使用,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
Vue3組件庫框架搭建example環(huán)境的詳細(xì)教程
這篇文章主要介紹了Vue3組件庫框架搭建example環(huán)境的詳細(xì)教程,本文便搭建?example?開發(fā)環(huán)境和打包構(gòu)建，并在example中使用組件庫，需要的朋友可以參考下
2022-11-11
一文了解Vue 3 的 generate 是這樣生成 render&n
本文介紹generate階段是如何根據(jù)javascript AST抽象語法樹生成render函數(shù)字符串的,本文中使用的vue版本為3.4.19,感興趣的朋友跟隨小編一起看看吧
2024-06-06