vue路由参数的获取、添加和替换
获取路由参数
getUrlKey(name){//获取url 参数
return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
},
修改和新增路由参数
- 安装依赖
npm i webpack-merge
- 引入
import merge from 'webpack-merge';
- 引用
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路由参数的获取、添加和替换的更多相关文章
- Vue路由参数
vue路由参数 1.参数router-link vue.prototype.xxx = {add:fn}`所有组件中,使用this.xxx就能拿到这个对象2.查询字符串 (1)配置: :to=&quo ...
- VUE 路由参数改变重新刷新数据
VUE 路由参数改变重新刷新数据 App.vue 里面使用路由,然后通过App.vue文件中的搜索功能搜索刷新路由文件中的列表. 修改 index.js 文件 首先在路由文件 index.js 文件中 ...
- vue路由参数变化刷新数据
当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...
- vue 路由参数变化,页面不更新的问题
监控$route 在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,如果不监听路由参数值的变化,页面无数据刷新,需手动刷新浏览器,这样做就不是我们的预期效果. 举例:当前路由为 /p ...
- vue 路由参数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue路由参数设置可有可无
参数后面使用 ? id 后面加个 ‘ ? ’ ,将 id 设置为可选参数 { name: "index", path: '/p/:id?', component: resolve ...
- vue 通过 name 和 params 进行调整页面传参刷新参数丢失问题&vue路由可选参数
vue 通过 name 和 params 进行调整页面传参刷新参数丢失问题 router.js: export default new Router({ routes: [ { path: '/', ...
- koa-router 路由参数与前端路由的结合
koa-router 定制路由时支持通过冒号形式在 url 中指定参数,该参数会挂载到 context 上然后可通过 context.params.paramName 方便地获取. 考察下面的示例: ...
- Vue路由获取路由参数
vue路由设置路由参数有2种方式: 1.通过query配置: <router-link :to="{ name:'login',query:{id:1} }">登录&l ...
随机推荐
- Codeforces Educational Round 92 赛后解题报告(A-G)
Codeforces Educational Round 92 赛后解题报告 惨 huayucaiji 惨 A. LCM Problem 赛前:A题嘛,总归简单的咯 赛后:A题这种**题居然想了20m ...
- 千万不要往 Shell 里粘贴命令!
对于用惯了 IDE 的程序员来说,在终端里敲命令可能没那么顺手,也记不住那么多复杂的命令.比较偷懒的做法就是网上搜相关的命令,复制到剪贴板往命令行窗口里一贴,完事! 但是这么做有很大的风险,为什么呢? ...
- ubuntu JDK&SDK 环境变量配置
ubuntu JDK&SDK 环境变量配置 一.下载JDK 1. 先卸载Ubuntu 带的openJDK: sudo apt-get purge openjdk* 2.到http://www. ...
- git常见操作和指令
1.指令集 1.1 本地与远程操作 创建文件 echo > README.md(文件名) 创建文件时输入信息 echo "(message)" >> README ...
- OpenCV开发笔记(七十三):红胖子8分钟带你使用opencv+dnn+yolov3识别物体
前言 级联分类器的效果并不是很好,准确度相对深度学习较低,上一章节使用了dnn中的tensorflow,本章使用yolov3模型,识别出具体的分类. Demo 320x320,置信度0 ...
- Class的继承
Class 的继承 简介 Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多. class Point { } class ColorPoint ...
- 在阿里云Ubuntu 14.04.5 LTS下安装nethogs0.8.5
由于默认安装的nethogs不能使用,提示:Creating socket failed while establishing local IP - are you root? 搜索资料后检查当前版本 ...
- JPA 相关API (一)
[Query 接口下的常用API] [API 测试类:Test_QueryAPI.java] 1 package org.zgf.jpa.entity; 2 3 import java.math.Bi ...
- 12 Servlet_04 Servlet增删改查 静态页面与动态页面 EL表达式 table表格的一些样式
今天学习了servlet的增删改查: 存储数据 setAttribute(String name,Object obj );获取数据 getAttribute(String name);删除数据 re ...
- 4G模块是什么 4G模块的工作原理
4G模块是什么 4G模块,又叫4G传输模块.4G通信模块.4G LTE模块.它是一种硬件加载到指定频段,软件支持标准的LTE协议,且软硬件高度集成模组化的产品,具有兼容性好.通信速度快.通信数据量大. ...