vue遇到的问题五:修改路由参数,不会刷新该页面

在Vue应用中,当修改路由参数时,组件通常不会自动刷新。为解决这个问题,可以监听路由并手动更新内容。例如,通过删除query中的特定参数来触发内容更新。此外,对于需要token的页面,如果token过期或不存在,应跳转到登录页,登录成功后需能自动返回原来的页面,并保持之前的状态和参数。

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

1. vue路由,修改某组件的路由参数,不会刷新该组件

需求:在某个组件中,内容由参数发起接口获取,且该组件由上/下翻页效果,
需要改变参数,更新内容

http://localhost:8080/#/module?type=1&id=15 //需要改变id

解决办法:

监听路由

方法一:
watch:{
// 路由发生变化页面刷新
 '$route' (to, from){
	 this.$router.go(0);
	 }
}
//缺点:刷新一次页面,用户体验不好

方法二:
// 将函数在执行一次
watch: {
	'$route' (to, from) {
    // 在created、mounted函数执行的方法,放到该处再执行一次
		fn()·······
	}
},
//缺点:重复发起一次请求

如果有更好的方法,欢迎留言

删除query中的内容 delete this.$route.query.token

2. 某个页面需要token,如果token过期、没有token跳到登录页,登录成功后再返回该页面

实际需求:再A页面,点击“创建活动”功能,需要判断token;如果没有,或过期,强制跳转到登录页,然后登录了成功之后,自动跳转回A页面

//A页面
fn(){
	if(token){
		····
	}else{
		this.$router.push({
          path: '/login',
          query: {
            redirect: this.$router
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值