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

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

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

在日常工作中，我們需要將匹配到的所有路由，映射到一個組件上。

如下代碼想要達到的效果：

不傳page和id，則映射到user默認list頁面

傳page和id，根據(jù)page不同，顯示不同的頁面

問題

使用以下代碼片段是不能實現(xiàn)以上效果的，因為默認情況下page和id參數(shù)是必傳的，如果不傳參數(shù)，則會根據(jù)默認路由跳轉(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 動態(tài)添加路由

動態(tài)添加路由可以用了做權限管理。登錄后服務器端返回權限菜單，前端動態(tài)添加路由然后在設置菜單

1、vue-router 有方法router.addRoutes(routes) 動態(tài)添加更多的路由規(guī)則。參數(shù)必須是一個符合 routes 選項要求的數(shù)組。

使用方法

this.$router.options.routes[0].children.push({//插入路由
 name:'list',
 path: 'list',
 component: resolve => require(['../template/list.vue'], resolve)//將組件用require引進來
});
this.$router.addRoutes(this.$router.options.routes);//調(diào)用addRoutes添加路由

我的路由文件:

export default new Router({
 routes: [
  {
   path: '/',
 
   component: index,
  },
  {
   path: '/login',
   name: 'login',
   component: login
  }
 ]

總結

以上所述是小編給大家介紹的vue router動態(tài)路由設置參數(shù)可選問題，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

您可能感興趣的文章:

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