Vue3+Vue Router跳转相同路由监听页面刷新并执行某个操作

1 起源

最近遇到了个这样的需求,大概就是:点击某个按钮,进入某个页面,然后再在这个页面执行某个操作(比如请求某个接口、赋初始值啥的)。

这个需求看似简单,其实也不难。但是, 我遇到了个问题,就是当在那个页面点击这个按钮的时候,因为跳转路由路径是一样的原因,页面是不会刷新的,那我怎么判断我是否我是否点击了那个按钮并且跳到了这个页面呢?

于是,我想到了路由传参,通过路由传参的方式,判断这个参数是否变化了,变化了就代表这个路由再次进入了。

2 解决方案

用query的方式传参,参数附上时间戳,这样每进来一次都是不同的参数

点击按钮如下操作:

javascript 复制代码
const router = useRouter()
​
const goDocumentNotification = () => {
  router.push({
    path: `/documentNotification`,
    query: {
      t: Date.now()
    }
  })
}

在进入的那个页面增加如下代码:

scss 复制代码
// 使用 watch 监听 route 的变化
watch(
  () => route.query.t,
  (newPath, oldPath) => {
  // 路由变化,执行相应操作
    query()
  }
)

ok,经过上面的操作便可以在跳转相同路由下,监听页面刷新并执行某个操作啦。

3 知识扩展-关于Vue Router路由传参的几种常用方式

说到这里,vue-router传参的几种方式也顺便总结一下吧

3.1 params传参(显示参数)

浏览器里路由地址显示为这样:

bash 复制代码
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>

编程式:

dart 复制代码
// 子路由配置
{
    path: '/documentNotification/:id?', // ?代表这个参数为可传可不传
    name: 'documentNotification',
    component: () => import('@/views/documentNotification/index.vue'),
    meta: {
      title: '发放通知',
    }
}
// 父路由编程式传参(一般通过事件触发)
router.push({
    path:'/documentNotification/${yourParam}',
})

关于参数的获取:

csharp 复制代码
route.params.id

3.2 params传参(不显示参数)

由于从Vue Router的2022-8-22 这次更新后,便不能再用这种方式来写,关于不显示参数的传参,可以参考下面这篇博客:

blog.csdn.net/m0_57033755...

3.3 query传参

浏览器里路由地址显示为这样:

bash 复制代码
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>

编程式:

css 复制代码
//子路由配置
{
    path: '/documentNotification',
    name: 'documentNotification',
    component: () => import('@/views/documentNotification/index.vue'),
    meta: {
      title: '发放通知'
    }
}
router.push({
    path: `/documentNotification`,
    query: {
      t: Date.now()
    }
})

关于参数的获取:

erlang 复制代码
route.query.t

4 结语

ok ,就到这里啦,对此你有何看法或想法呢,欢迎提出讨论呀~

相关推荐
菜鸟una44 分钟前
【微信小程序 + map组件】自定义地图气泡?原生气泡?如何抉择?
前端·vue.js·程序人生·微信小程序·小程序·typescript
昔人'3 小时前
`list-style-type: decimal-leading-zero;`在有序列表`<ol></ol>` 中将零添加到一位数前面
前端·javascript·html
岁月宁静8 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者9 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~9 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge9 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再9 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴9 小时前
Lua 模块的完整入门指南
前端·lua
Sheldon一蓑烟雨任平生10 小时前
Vue3 表单输入绑定
vue.js·vue3·v-model·vue3 表单输入绑定·表单输入绑定·input和change区别·vue3 双向数据绑定
浪里行舟10 小时前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端