vue-router动态路由设置参数可选

在日常工作中，我们需要将匹配到的所有路由，映射到一个组件上。
如下代码想要达到的效果：

不传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?'

转载于:https://www.cnblogs.com/eyunhua/p/11389289.html

vue-router动态路由设置参数可选相关推荐

Vue Router 实现路由控制实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. Vue Router 实现路由控制实战前言一.什么是单页面应用及实现前端路 ...
vue将每个路由打包成html,Ant Design Vue pro 动态路由的实现和打包
Ant Design Vue pro 动态路由的实现和打包 Ant Design Vue pro 动态路由的实现和打包配置路由权限在config文件夹下router.config.js中配置路由权 ...
面试考问Vue Router 的路由模式，这个回答令我直接出局！
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
你真的理解 Vue Router 的路由模式吗？
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
面试考问Vue Router 的路由模式，这个回答令我直接出局~
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
注意避坑，Vue Router 4: 路由参数在 created/setup 时不可用
有梦想,有干货,微信搜索 [大迁世界] 关注这个在凌晨还在刷碗的刷碗智. 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考 ...
vue router children 路由变了组件没变_Vue.js从零开始——路由（2）
因为一些原因,我断更了几天时间,因为要准备面试 + 不在家,抱歉大家! 题图是一个大概的 Vue 模块化项目组成,当然因为我从网上找的,所以可以忽略当中的 Bulma,这其实是一个 CSS 框架,往简 ...
Vue 增加动态路由功能【在原有系统上增加】
目录遇到问题 1. 修改router/index.js 2. 修改 store文件夹下的 2.1 增加 modules/permission.js 2.2 增加modules/tagsViews.j ...
vue admin 动态路由权限管理
主要思路通过后端接口返回数据进行判断 (通过后端实现的权限管理有许多种),在这里我们主要通过关键字即匹配前端路由meta.menu值来实现权限管理通常会把路由权限列表存至vux中箭头所指的便 ...
vue实现动态路由一步到位
最近在写vue项目,需要由后台传来当前用户对应权限的路由表,前端通过调接口拿到后处理(后端处理路由),就是配置vue动态路由啦. 由于错信了一些网上的文章:(,导致在这个问题上耗费了不少时间,想想,还 ...

vue-router动态路由设置参数可选

问题

解决方法

vue-router动态路由设置参数可选相关推荐

最新文章

热门文章