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
    }
  })
  

• 获取时，在路由跳转对象 $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、当然，两种方式的使用都可以的。具体看自己的需要啦

欢迎留言，一起探索更多~