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

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

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

傳page和id，根據page不同，顯示不同的頁面

問題

使用以下代碼片段是不能實現以上效果的，因為默認情況下page和id參數是必傳的，如果不傳參數，則會根據默認路由跳轉到home頁面

new Router({  routes: [    {      path: '/user/:page/:id',      name: 'User',      component: () => import('pages/user')    },    {      path: '*',      redirect: '/home'    }  ]})

解決方法

參數配置改成可選的

path: '/user/:page?/:id?'

ps：下面看下vue-router 動態添加 路由

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

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

           使用方法 

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);//調用addRoutes添加路由

我的路由文件:

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

總結

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