1 起源
最近遇到了个这样的需求，大概就是：点击某个按钮，进入某个页面，然后再在这个页面执行某个操作（比如请求某个接口、赋初始值啥的）。
这个需求看似简单，其实也不难。**但是，**我遇到了个问题，就是当在那个页面点击这个按钮的时候，因为跳转路由路径是一样的原因，页面是不会刷新的，那我怎么判断我是否我是否点击了那个按钮并且跳到了这个页面呢？
于是，我想到了路由传参，通过路由传参的方式，判断这个参数是否变化了，变化了就代表这个路由再次进入了。
2 解决方案
用query的方式传参，参数附上时间戳，这样每进来一次都是不同的参数
点击按钮如下操作：
代码语言：javascript复制const router = useRouter()
const goDocumentNotification = () => {
router.push({
path: `/documentNotification`,
query: {
t: Date.now()
}
})
}在进入的那个页面增加如下代码：
代码语言：javascript复制// 使用 watch 监听 route 的变化
watch(
() => route.query.t,
(newPath, oldPath) => {
// 路由变化，执行相应操作
query()
}
)ok，经过上面的操作便可以在跳转相同路由下，监听页面刷新并执行某个操作啦。
3 知识扩展-关于Vue Router路由传参的几种常用方式
说到这里，vue-router传参的几种方式也顺便总结一下吧
3.1 params传参（显示参数）
浏览器里路由地址显示为这样：
代码语言：javascript复制http://127.0.0.1:5190/drs/index.html#/documentNotification/0声明式：
代码语言：javascript复制// 子路由配置
{
path: '/documentNotification/:id?', // ?代表这个参数为可传可不传
name: 'documentNotification',
component: () => import('@/views/documentNotification/index.vue'),
meta: {
title: '发放通知',
}
}
// 父路由组件
<router-link :to="/documentNotification/123">进入documentNotification路由</router-link>编程式：
代码语言：javascript复制// 子路由配置
{
path: '/documentNotification/:id?', // ?代表这个参数为可传可不传
name: 'documentNotification',
component: () => import('@/views/documentNotification/index.vue'),
meta: {
title: '发放通知',
}
}
// 父路由编程式传参(一般通过事件触发)
router.push({
path:'/documentNotification/${yourParam}',
})关于参数的获取：
代码语言：javascript复制route.params.id3.2 params传参（不显示参数）
由于从Vue Router的2022-8-22 这次更新后，便不能再用这种方式来写，关于不显示参数的传参，可以参考下面这篇博客：
https://blog.csdn.net/m0_57033755/article/details/129927829
3.3 query传参
浏览器里路由地址显示为这样：
代码语言：javascript复制http://localhost:3000/#/documentNotification?t=1700140985974声明式：
代码语言：javascript复制//子路由配置
{
path: '/documentNotification',
name: 'documentNotification',
component: () => import('@/views/documentNotification/index.vue'),
meta: {
title: '发放通知'
}
}
//父路由组件
<router-link :to="{name:'documentNotification',query:{t:123}}">进入documentNotification路由</router-link>编程式：
代码语言：javascript复制//子路由配置
{
path: '/documentNotification',
name: 'documentNotification',
component: () => import('@/views/documentNotification/index.vue'),
meta: {
title: '发放通知'
}
}
router.push({
path: `/documentNotification`,
query: {
t: Date.now()
}
})关于参数的获取：
代码语言：javascript复制route.query.t4 结语
ok ,就到这里啦，对此你有何看法或想法呢，欢迎提出讨论呀~
