vue-router如何实时动态替换路由参数(地址栏参数)

 更新时间:2022年09月23日 11:19:19   作者:曾曾子  
这篇文章主要介绍了vue-router如何实时动态替换路由参数(地址栏参数),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

实时动态替换路由参数(地址栏参数)

应用场景

例如:

页面上有多个tab,点击不同的tab,跳转到不同的页面上去,再次返回的时候,需要知道上次点击的是哪个tab,这样不用存缓存,直接改路由参数,然后直接返回就可以了;

用法如下

import merge from 'webpack-merge';
//如果路由没有参数name,就新增一个参数,如果有的话,就是修改name的值
//可以修改多个参数
this.$router.push({
    query:merge(this.$route.query,{'name':'小米'})
});
this.$router.replace({
  query: merge(this.$route.query, {'name':'小米'})
});
this.$router.push({
   query: merge(this.$route.query, {
     'name': '小米',
     'age':'9'
   })
 });
 
this.$router.replace({
   query: merge(this.$route.query, {
     'name': '小米',
     'age':'9'
   })
 });
//替换所有的参数
this.$router.push({
    query:merge({},{'name':'小米'})
}) 
this.$router.replace({
    query:merge({},{'name':'小米'})
}) 

replace()和push() 的区别

1. this.$router.push() 

描述:此方法会向history栈添加一个记录,返回this.$router.back()会返回到上一个页面。

2.this.$router.replace() 

描述:此方法不会向history里面添加新的记录,返回this.$router.back()会直接跳转到上上一个页面。

动态替换路由-Url参数

动态替换和修改URL的参数,可使用webpack-merge包来完成。

安装webpack-merge

npm install webpack-merge --D

引入包

import merge from 'webpack-merge'

操作参数

新增

// 新增一个id
 this.$router.push({
    query:merge(this.$route.query,{'id':'123'})
})

修改

// 修改id
this.$router.push({
    query:merge(this.$route.query,{'id':'456'})
})

替换

// 替换所有参数为userId
this.$router.push({
    query:merge({},{'userId':'xxx123456'})
})

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解Vue.js 可拖放文本框组件的使用

    详解Vue.js 可拖放文本框组件的使用

    这篇文章主要介绍了详解Vue.js 可拖放文本框组件的相关资料,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03
  • Vue中router-link如何添加mouseover提示

    Vue中router-link如何添加mouseover提示

    这篇文章主要介绍了Vue中router-link如何添加mouseover提示,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-11-11
  • vue子路由跳转实现tab选项卡

    vue子路由跳转实现tab选项卡

    这篇文章主要为大家详细介绍了vue子路由跳转实现tab选项卡,完成一个简单的tab选项卡布局,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • Vue body样式修改方式

    Vue body样式修改方式

    这篇文章主要介绍了Vue body样式修改方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • Vue.js结合SortableJS实现树形数据拖拽

    Vue.js结合SortableJS实现树形数据拖拽

    本文主要介绍了Vue.js结合SortableJS实现树形数据拖拽,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • vuex实现及简略解析(小结)

    vuex实现及简略解析(小结)

    这篇文章主要介绍了vuex实现及简略解析(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • 使用github部署前端vue项目

    使用github部署前端vue项目

    这篇文章主要为大家介绍了使用github部署前端vue项目过程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • Vue组件开发之LeanCloud带图形校验码的短信发送功能

    Vue组件开发之LeanCloud带图形校验码的短信发送功能

    Vue是目前使用较广泛的三大前端框架之一,其数据驱动及组件化的特性使得前端开发更为快捷便利。本文在LeanCloud 短信轰炸与图形校验码官方文档 基础上,从封装需要出发开发一个简单的短信图形验证Vue组件,具体内容详情大家参考下本文
    2017-11-11
  • 在Vue中使用axios请求拦截的实现方法

    在Vue中使用axios请求拦截的实现方法

    这篇文章主要介绍了在Vue中使用axios请求拦截,需要的朋友可以参考下
    2018-10-10
  • 基于vue2实现左滑删除功能

    基于vue2实现左滑删除功能

    这篇文章主要为大家详细介绍了基于vue2实现左滑删除功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11

最新评论