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ù)默認路由跳轉到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項目復用一個node_modules的問題
這篇文章主要介紹了多個vue項目復用一個node_modules的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue實現(xiàn)阻止瀏覽器記住密碼功能的三種方法
本文主要介紹了Vue實現(xiàn)阻止瀏覽器記住密碼功能的三種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-06-06
element-ui 表格sortable排序手動js清除方式
這篇文章主要介紹了element-ui 表格sortable排序手動js清除方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07
Vue.js常用指令的使用小結
這篇文章主要介紹了Vue.js常用指令的使用，非常不錯，具有參考借鑒價值,需要的朋友可以參考下
2017-06-06
vue內(nèi)置組件transition簡單原理圖文詳解(小結)
這篇文章主要介紹了vue內(nèi)置組件transition簡單原理圖文詳解(小結),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
詳解在Vue中如何模塊化使用Vuex
這篇文章給大家介紹了在Vue 中如何模塊化使用 Vuex,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下
2024-01-01
React和Vue中監(jiān)聽變量變化的方法
這篇文章主要介紹了React和Vue中監(jiān)聽變量變化的方法,本文通過一個場景，父組件傳遞子組件一個A參數(shù)，子組件需要監(jiān)聽A參數(shù)的變化轉換為state，具體內(nèi)容詳情大家跟隨小編一起通過本文學習吧
2018-11-11
vue3?HTTP請求中的axios示例詳解
Axios?是一個簡單的基于?promise?的?HTTP?客戶端，適用于瀏覽器和?node.js。Axios?在具有非常可擴展的接口的小包中提供了一個簡單易用的庫，這篇文章主要介紹了vue3-HTTP請求之a(chǎn)xios,需要的朋友可以參考下
2022-12-12
vue中設置滾動條方式
這篇文章主要介紹了在vue中設置滾動條的方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
還在用vuex?來了解一下pinia
這篇文章主要為大家詳細介紹了pinia，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
2022-02-02