Vue Router路由push不同参数跳转同一页面 页面不刷新问题

本文介绍了解决Vue项目中使用路由跳转到同一页面时不刷新的问题。提供了两种解决办法:一是通过监听$route的变化来执行页面初始化操作;二是利用activated生命周期钩子替代mounted钩子,确保每次进入页面时都能正确加载数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Vue Router路由push不同参数跳转同一页面 页面不刷新问题

在vue项目开发中,使用路由进行页面跳转时,路由所跳转的页面不进行刷新。也就是vue生命周期函数没有执行(created、mounted钩子函数)

1.常规解决办法
路由监听watch

watch: {
	'$route' (to, from) {
    // 在mounted函数执行的方法,放到该处
	// 加载页面数据的方法
	}
},

2.特殊处理解决办法
替换周期函数 使用activated:{}周期函数代替mounted:{}函数即可

mounted() {
	//加载页面初始化数据的方法
}
替换为
activated() {
	//加载页面初始化数据的方法
}

created():在创建vue对象时,当html渲染之前就触发;但是注意,全局vue.js不强制刷新或者重启时只创建一次,也就是说,created()只会触发一次

activated():在vue对象存活的情况下,进入当前存在activated()函数的页面时,一进入页面就触发;可用于初始化页面数据等

### Vue3 中路由 `push` 跳转到相同路径时强制新的方法 在 Vue3 开发过程中,当通过 `$router.push()` 进行页面跳转时,如果目标路径与当前路径完全一致,则会触发组件的重新加载或生命周期钩子函数。以下是几种常见的解决方案: #### 方法一:监听 `$route` 变化并手动处理逻辑 可以通过 `watch` 来监控路由的变化,并在检测到查询参数或其他属性发生变化时,主动调用方法来实现页面新。 ```javascript import { watch } from 'vue'; import { useRoute } from 'vue-router'; export default { setup() { const route = useRoute(); watch( () => route.fullPath, (newVal, oldVal) => { if (newVal !== oldVal && newVal.includes('?')) { location.reload(); // 或者其他自定义逻辑 } } ); }, }; ``` 这种方法适用于需要根据 URL 参数动态调整视图的情况[^1]。 --- #### 方法二:利用中间路由进行重定向 可以在路由配置中新增一个特殊的路由(如 `/refresh`),并通过导航至该路由再返回原路由的方式完成页面新效果。 ##### 配置示例: ```javascript const routes = [ { path: '/target', name: 'TargetPage', component: () => import('@/views/TargetPage.vue'), }, { path: '/refresh', name: 'Refresh', beforeEnter(to, from, next) { next(from.path); // 返回上一页的实际地址 }, }, ]; ``` ##### 使用方式: ```javascript this.$router.push({ path: '/refresh' }); ``` 此方案能够有效规避直接新整个页面带来的性能损耗问题[^2]。 --- #### 方法三:销毁并重建组件实例 另一种思路是在保持原有路由结构变的前提下,借助 `key` 属性绑定唯一标识符给 `<keep-alive>` 包裹的目标组件,从而达到每次切换都创建新实例的效果。 ```html <template> <div id="app"> <!-- 动态设置 key 值 --> <component :is="$route.meta.layout || 'default'" :key="$route.fullPath"></component> </div> </template> <script> export default { computed: { currentViewComponent() { return () => import(`@/components/${this.$route.name}.vue`); }, }, }; </script> ``` 上述代码片段展示了如何基于完整的路由路径作为键值来区分不同的渲染状态[^3]。 --- #### 总结 以上三种策略各有优劣,开发者应依据实际需求选取最合适的手段解决问题。例如对于简单的场景可以考虑第一种办法;而对于更复杂的应用则推荐采用第二种或者第三种技术路线。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值