vue如何实现动态改变地址栏的参数值
更新时间：2022年07月29日 15:46:43 作者：whylost迷心
这篇文章主要介绍了vue如何实现动态改变地址栏的参数值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
动态改变地址栏的参数值
点击切换Tab，通过watch监听，在地址栏修改对应得active参数，这样刷新后还能保持最后浏览的tab
watch: {
active (newValue) {
let query = this.$router.history.current.query;
let path = this.$router.history.current.path;
//对象的拷贝
let newQuery = JSON.parse(JSON.stringify(query));
// 地址栏的参数值赋值
newQuery.active = newValue;
this.$router.push({ path, query: newQuery });
}
}
监听url地址栏参数变化
问题：
在开发过程中我们有可能会遇到一个问题，就是在一个vue项目中引入了一个组件，点击这个组件跳转的还是当前的页面，只是传递的参数发生了变化，这个时候我们传递的参数就不能正常的赋值了，这是因为页面没有重新加载，所以我们就要监听地址栏的参数变化了。
1.传递参数
this.$router.push({
path: url,//路由地址
query:{//参数
type: 1
}
});2.监听参数变化
watch: {
//监听路由地址的改变
$route:{
immediate:true,
handler(){
if(this.$route.query.type){//需要监听的参数
this.type = this.$route.query.type
}
}
}
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了基于Vue实现后台系统权限控制的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要介绍了Vue3侦听器的实现原理详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
这篇文章主要介绍了vue使用@include或@mixin报错的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
本文主要介绍了vue3+pinia用户信息持久缓存token的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要为大家介绍了Vue3使用Swiper实现轮播图示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
在 Vue.js 中,使用 v-for 指令进行数据渲染时,有时会遇到渲染顺序混乱的问题,这种问题主要与 Vue 的响应式系统、DOM 更新机制以及数组的变更方法有关,以下是对这一现象的深入分析及解决方案,需要的朋友可以参考下2025-01-01
在本篇文章里小编给大家整理的是一篇关于vue3组件通信的方式总结及实例用法，对此有兴趣的朋友们可以跟着学习下。2021-12-12
这篇文章主要介绍了vant的Uploader 文件上传,图片数据回显问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
与后端生成二维码相比,前端生成二维码更具有灵活性,下面这篇文章主要给大家介绍了关于Vue实现生成二维码的简单方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
这篇文章主要介绍了解决vue 使用axios.all()方法发起多个请求控制台报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论