vue实现动态改变地址栏的参数值

最新推荐文章于 2024-10-04 11:20:52 发布
最新推荐文章于 2024-10-04 11:20:52 发布
阅读量2.7k 收藏 2
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42304808/article/details/116754948
版权
本文介绍如何在Vue应用中实现点击切换Tab时动态更新地址栏的参数值，并利用watch监听来保持页面刷新后的状态，确保用户始终能看到最后浏览的Tab。
摘要由CSDN通过智能技术生成

vue实现动态改变地址栏的参数值

点击切换Tab，通过watch监听，在地址栏修改对应得active参数，这样刷新后还能保持最后浏览的tab

watch: {
   
    active (newValue) {
   
      let query = this.$router.history.current.query;
      let path = this.$router
最低0.47元/天 解锁文章
whylost迷心
关注
专栏目录
Vue下URL地址栏参数改变却不能刷新界面
夏已微凉、
05-20 3814
一、前言二、原因三、解决 一、前言 下拉选择，根据不同的值展示不同的内容，初次点击可以获取到相应的值，但是当第二次点击时，虽然地址栏的参数改变了，但页面内容并没改变。 URL 如下： http://127.0.0.1:8080/#/user?hobby=study http://127.0.0.1:8080/#/user?hobby=play 二、原因 vue项目中路由跳转默认采用hash的方式，而hash的变化不会导致浏览器发送请求到服务器； 将获取数据的的函数的执行放在了Vue生命周期函数 .
vue组件跳转到当前组件地址栏参数改变组件内容却不刷新
zqyzqy22的博客
04-04 1832
vue组件跳转到当前组件地址栏参数改变组件内容却不刷新 同一路由刷新的问题 1：刷新当前页面 强制刷新整个页面来满足效果。但页面整体的刷新会使体验下降。 watch: { '$route' (to, from) { this.$router.go(0); }} 2：路由变化重新获取数据 methods:{ getMsg(){ //接口请求数据 ...
vue 修改地址栏参数
weixin_41463944的博客
11-27 2200
let query = JSON.parse(JSON.stringify(this.$route.query)) query.productModelId = 'abc' //state 修改的参数 this.$router.push({ path: this.$route.path, query })
Vue2.x路由实现地址栏变化的API
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
10-04 1143
Vue Router是一个官方支持的路由管理器。它和Vue.js的核心深度集成，让你可以轻松地为Vue应用添加单页面应用路由功能。Vue Router提供了一套简洁的API来定义路由规则，并且可以和Vue.js的数据驱动及组件系统无缝对接。
vue3 修改浏览器中url的参数，即时刷新页面数据
reembarkation的博客
03-26 1214
vue3 修改浏览器中url的参数，即时刷新页面数据
地址栏连接参数修改
weixin_30458043的博客
04-27 147
分享两个处理地址栏参数的常见方法 第一步：将参数连接转换为对象 // 将连接参数转为对象 function queryToJson(url) { let locse = url.split('?'); let search = locse[1] ? locse[1] : locse[0]; let pairs = search.split('&...
Vue Router 路由组件传参
qq_26642611的博客
12-25 341
在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。 使用 props 将组件和路由解耦： 取代与 $route 的耦合 const User = { template: '<div>User {{ $route.params.id }}</div>' } const router = new VueR...
ms-问题解决与名词解释
为写出赏心悦目、容易维护的代码而探索
04-22 3978
问题解决与名词解释
vue中路由跳转的时候地址栏不变_Vue.js 面试宝典
weixin_35070925的博客
01-26 5938
转眼又到了每年就业的黄金时期，各位想要跳槽，想找工作的小伙伴已经开始复习各种面试时需要知识了。今天就给大家总结一下Vue方面的面试题。一、什么是MVVM？MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是...
vue当前页面点击列表改变地址栏参数
09-19
在Vue中，我们可以通过操作地址栏参数来实现当前页面点击列表改变地址栏参数的功能。实现这个功能的关键是使用Vue Router的功能。 首先，我们需要在项目中安装Vue Router，并在主页中引入并使用Vue Router。在主页...
vue路由传值，修改地址栏参数而不刷新页面
qq_57052578的博客
09-23 2832
vue路由传值，修改地址栏参数而不刷新页面
vue动态路由:路由参数改变,视图不更新问题的解决
12-13
问题描述： 使用vue动态路由（“/route/:id” 形式） 传参的时候，修改页面参数，但是视图仍旧是之前的内容，没有进行刷新，示例如下： 原因分析： 具体原因在vue官方文档：响应路由参数的变化一节中有讲过： 当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。 复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象 （摘自vue文档） 解决办法： 方法一： watch (监测变化)
Vue通过url参数获取当前页数据，动态改变query参数后，返回无法获取最新数据问题
Jensonhui's Blog
10-26 1841
需求背景： A页面通过query: { sno: xxxx } 跳转到B页面 B页面通过接收sno参数，请求获取数据： // 查询商品详情, 在created生命周期调用 async getGoodsInfo () { const res = await this.$post(this.$url.goods.gooddetail, { sno: this.$route.query.sno }) } B页面底部有相关产品列表，点击产品动态改变当前query中的sno值： //
Vue中this.$router.push参数获取
无双孟堂的博客
09-23 11万+
传递参数的方法： 1.Params 由于动态路由也是传递params的，所以在 this.$router.push() 方法中 path不能和params一起使用，否则params将无效。需要用name来指定页面。 及通过路由配置的name属性访问 在路由配置文件中定义参数： 通过name获取页面，传递params： 在目标页面通过this.$route.para
vue之this.$route.query和this.$route.params的使用与区别
lsy__lsy的博客
04-18 12万+
一、this.$route.query的使用  1、router/index.js    {    path:'/mtindex',    component: mtindex,    //添加路由    children:[     {      path:':shopid',      component:guessdetail     }    ]         ...
vue-router 2.0 常用基础知识点之router.push()
热门推荐
大灰狼的小绵羊哥哥的博客
04-01 17万+
除了使用 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。 router.push(location) 想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，
this.$route和this.$router的区别
gaoqiang1112的博客
12-09 2万+
因为都绑定在this上 所以 其实 大家可以通过 打印this 来查看 $route 和 $router 的区别 博主 之前看过一篇博客 https://blog.csdn.net/zzz_zed/article/details/78885944 感觉 并没有把具体的内容 给指定出来 比如 方法在哪里 所以 再详细给大家说一下 从上图可以看出 this上 有这个2个属性 我...
Vue中this.$router的使用
weixin_43931617的博客
02-14 2万+
vue中this.$router.push有两种使用方法： 传入参数且地址栏中带上参数内容 this.$router.push({path/name: ' 路由 ', query: {key: value}}) （是path还是name由你自己定，如果是name那么在定义路由的时候需要写明 类似这种： { path: '/home', name: 'Home', component...
Vue修改url路由中的参数
weixin_43067272的博客
09-06 2983
Vue修改url路由中的参数 话不多说，直接看代码 npm i webpack-merge import merge from 'webpack-merge'; this.$router.push({ query:merge(this.$route.query,{'key':'value'}) }) 通过下载webpack-merge依赖包实现 如果key本来存在的话就是修改key的值，不存在的话就添加key这个属性，如果想替换所有的属性只要换成{}就可以。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值