vue不同参数跳转同一路由，复用同一组件，动态路由实现

最新推荐文章于 2025-09-18 09:45:00 发布

原创最新推荐文章于 2025-09-18 09:45:00 发布 · 3.4k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #es6

问题积累专栏收录该内容

4 篇文章

订阅专栏

本文介绍了在Vue中如何通过动态路由匹配实现不同参数跳转到同一路由并复用组件的需求。关键在于使用name属性进行路由跳转，并通过params传递参数。在组件内部，需要手动调用数据刷新的方法来更新页面数据，以解决页面数据不刷新的问题。当按浏览器回退按钮时，同样需要处理数据刷新。

问题描述

有时候需要跳转同一个路由（或者复用同一组件），但是vue是不能实现同路由跳转的，但可以用其他方法实现需求，这里用作品页面案例举例。

需求

看图
在这里插入图片描述

实现

使用vue router的动态路由匹配，官方文档：动态路由匹配

代码

router文件中的路由设置，具体看官方文档

{
    path: '/work_exhibition/:workId',
    name: 'WorkExhibition',
    component: () => import('@/pages/WorkExhibition/index.vue'),
    meta: {title: '作品展示'}
 }

别的路由跳转进来，注意：不要用path路径，要用name，params传参。

this.$router.push({name: 'WorkExhibition', params: {workId: this.relevantWorks[index].id}});

相同路由跳转，和上面一样，但是跳转后页面数据没有变化，对因为用同一组件，vue不会直接销毁该组件，也就不会调用组件一些生命周期函数

this.$router.push({name: 'WorkExhibition', params: {workId: this.relevantWorks[index].id}});

处理数据不刷新，可以将获取数据的方法写在一个方法里，在跳转后调用这个方法去更新数据

this.$router.push({name: 'WorkExhibition', params: {workId: this.relevantWorks[index].id}});
this.init();	// 更新数据的方法

做完上面几步基本就实现了，但是还有个小问题，就是按浏览器回退按钮时，数据页不会刷新，也要手动调用数据刷新的方法才能解决

总结

使用vue的动态路由匹配
注意不要用path路径，用name
跳转后手动刷新数据

不知道有没有更好的方法，目前我只能想到这样