vue|vue 动态路由设置（对比query方式跳转） vue动态路由设置（对比query方式

一、动态路由配置router.config.js
设置path路径时，增加冒号 ":" 声明后面的为变量，直接拼接在path中

{ path: '/sign-detail/:id', name: 'sign-detail', component: () => import('@/views/adv-order-management/sign-detail'), meta: { title: '报名详情', keepAlive: false } }

二、动态跳转方法
直接将变量id拼接在 path 后面即可（下面跳转后为 '/sign-detail/5'）

let id = 5 this.$router.push({ path: '/sign-detail/' + id })

三、在动态路由的页面获取参数
在对应页面的路由跳转对象 $route 的 params 中获取

created () { const { id } = this.$route.params }

以上就是动态路由的简单使用方法。四、query键值对跳转

query 在使用上更加简洁，不需要配置路由，有多个参数时也更加方便
跳转时，在 query 中传入键值对（下面跳转后为 '/sign-detail?id=5&type=1'）

let id = 5 this.$router.push({ path: '/sign-detail', query: { id, // 直接设置多个键值对 type: 1 } })

【vue|vue 动态路由设置（对比query方式跳转）】获取时，在路由跳转对象 $route 的 query 中获取

created () { const { id, type } = this.$route.query }

五、两种方式异同？
1、重要！ 仅参数变化时，两种方式都是仅更新路由，不触发页面刷新 例如 '/sign-detail/5' 跳转到 '/sign-detail/4'
或者 '/sign-detail?id=5' 跳转到 '/sign-detail?id=4'
这两种情况下，都只能看到地址栏的路由变化，页面数据并没有更新，需要手动监听route刷新，如：

watch: { '$route' () { this.$router.go(0) } },

2、如果你的项目中，有很多重定向 的功能，选择 动态路由 是一种省心的方式。假设一个场景，我正在浏览 '/sign-detail?id=5'这个页面，
下一步我要登录，登录后重定向回来时，还需要在query中带上token ，
这时我肯定需要一些代码量去处理参数的merge
但是如果我选择 '/sign-detail/5'，这个场景我就不需要做什么了，直接重定向回来即可。
3、当然，两种方式的使用都可以的。具体看自己的需要啦欢迎留言，一起探索更多~