获取路由参数

getUrlKey(name){//获取url 参数
return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
},

  修改和新增路由参数

  1. 安装依赖

    npm i webpack-merge
    

      

  2. 引入
    import merge from 'webpack-merge';
    

      

  3. 引用
    this.$router.push({    //修改原有参数
    query:merge(this.$route.query,{'id':'1'})
    }) this.$router.push({ //新增一个参数
    query:merge(this.$route.query,{'teamName':'开发组'})
    }) this.$router.push({ //替换所有参数
    query:merge({},{'teamName':'测试组'})
    })

      

vue路由参数的获取、添加和替换的更多相关文章

  1. Vue路由参数

    vue路由参数 1.参数router-link vue.prototype.xxx = {add:fn}`所有组件中,使用this.xxx就能拿到这个对象2.查询字符串 (1)配置: :to=&quo ...

  2. VUE 路由参数改变重新刷新数据

    VUE 路由参数改变重新刷新数据 App.vue 里面使用路由,然后通过App.vue文件中的搜索功能搜索刷新路由文件中的列表. 修改 index.js 文件 首先在路由文件 index.js 文件中 ...

  3. vue路由参数变化刷新数据

    当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...

  4. vue 路由参数变化,页面不更新的问题

    监控$route 在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,如果不监听路由参数值的变化,页面无数据刷新,需手动刷新浏览器,这样做就不是我们的预期效果. 举例:当前路由为  /p ...

  5. vue 路由参数

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Vue路由参数设置可有可无

    参数后面使用 ? id 后面加个 ‘ ? ’ ,将 id 设置为可选参数 { name: "index", path: '/p/:id?', component: resolve ...

  7. vue 通过 name 和 params 进行调整页面传参刷新参数丢失问题&vue路由可选参数

    vue  通过 name 和 params 进行调整页面传参刷新参数丢失问题 router.js: export default new Router({ routes: [ { path: '/', ...

  8. koa-router 路由参数与前端路由的结合

    koa-router 定制路由时支持通过冒号形式在 url 中指定参数,该参数会挂载到 context 上然后可通过 context.params.paramName 方便地获取. 考察下面的示例: ...

  9. Vue路由获取路由参数

    vue路由设置路由参数有2种方式: 1.通过query配置: <router-link :to="{ name:'login',query:{id:1} }">登录&l ...

随机推荐

  1. python 虚拟环境安装

    windows虚拟环境的搭建 安装 # 建议使用pip3安装到python3环境下 pip3 install virtualenv pip3 install virtualenvwrapper-win ...

  2. 安装Linux注意事项

    网络配置NAT Worstation 生成虚拟网卡,编辑虚拟网络中子网IP地址为10网段内部地址,避免冲突.  Linux命令 查看主机IP地址 [root@C8 ~]# hostname -I 19 ...

  3. shell中将带分隔符的字符串转为数组

    shell中将字符串列表转换成数组,需要将数组用括号来表示,元素用"空格"符号分割开,格式如下: array_name=(value1 ... valuen) 使用内置的分割符IF ...

  4. Python开发 常见异常和解决办法

    1.sqlalchemy创建外键关系报错property of that name exists on mapper SQLAlchemy是Python编程语言下的一款开源软件,提供了SQL工具包及对 ...

  5. 初探RT-Thread系统在GD32E103x芯片上的使用,点亮LED灯

    初探RT-Thread系统在GD32E103x芯片上的使用,点亮LED灯 前言 ​ 随着中美贸易战的加剧,很多公司越来越重视使用国产技术的重要性.使用国产技术,一方面可规避国外对技术的封锁造成产品核心 ...

  6. java并发与多线程面试题与问题集合

    http://www.importnew.com/12773.html     https://blog.csdn.net/u011163372/article/details/73995897    ...

  7. D. Yet Another Problem On a Subsequence 解析(DP)

    Codeforce 1000 D. Yet Another Problem On a Subsequence 解析(DP) 今天我們來看看CF1000D 題目連結 題目 略,請直接看原題 前言 這題提 ...

  8. Setuptools 【Python工具包详解】

    什么是setuptools setuptools是Python distutils增强版的集合,它可以帮助我们更简单的创建和分发Python包,尤其是拥有依赖关系的.用户在使用setuptools创建 ...

  9. STM32入门系列-库帮助文档使用

    在前面文件夹介绍时,提到了stm32f10x_stdperiph_lib_um.chm文件,此文件是库函数使用帮助文档,可以直接打开如下图. 因为STM32库函数非常多,我们不可能把所有的外设函数都记 ...

  10. 利用CNN进行中文文本分类(数据集是复旦中文语料)

    利用TfidfVectorizer进行中文文本分类(数据集是复旦中文语料) 利用RNN进行中文文本分类(数据集是复旦中文语料) 上一节我们利用了RNN(GRU)对中文文本进行了分类,本节我们将继续使用 ...