Vue编程式路由跳转传递参数
Vue 有时在路由跳转时需要用到一些原页面里的数据,用以下方法:
1、在跳转页的方法里写下query参数
TableChange(scope){
this.$router.push({
path:'details',
name:'details',
query:{ //需要携带的参数
projectId:this.projectId,
projectName:this.projectName,
linkMan:this.linkMan,
phone:this.phone,
address:this.address,
builders:this.builders
}
})
},
2、在目标页读取使用:
this.$route.query
即可读取到传递过来的参数
Vue编程式路由跳转传递参数的更多相关文章
- vue编程式路由实现新窗口打开
一. 标签实现新窗口打开: 官方文档中说 v-link 指令被 组件指令替代,且 不支持 target=”_blank” 属性,如果需要打开一个新窗口必须要用标签,但事实上vue2版本的 是支持 ta ...
- vue_VueRouter 路由_路由器管理n个路由_并向路由组件传递数据_新标签路由_编程式路由导航
路由:就是一个 key 与 value 的映射关系.key 就是 pathh 前台路由的 value 是 Component 组件对象 后台路由的 value 是一个 回调函数 普通链接: 会发送请求 ...
- vue编程式导航,命名路由
//使用 window.location.href 的形式,叫做 编程式导航 绑定事件的形式 <template> <div class="goods-item" ...
- vue.js编程式路由导航 --- 由浅入深
编程式路由导航 实例中定义一个方法,这个方法绑定在标签上 然后就设置路由跳转 语法 this.$router.history.push('要跳转路由的地址') <!DOCTYPE html> ...
- VueJs(10)---vue-router(动态路由,嵌套式路由,编程式路由)
vue-router(动态路由,嵌套式路由,编程式路由) 本文是基于官网学习,官网具体学习目录:vue-router 一.安装 基于vue-cli脚手架安装还是蛮简单的:在文件当前目录下运行: npm ...
- 在React中使用 react-router-dom 编程式路由导航的正确姿势【含V5.x、V6.x】
## react-router-dom 编程式路由导航 (v5) ###### 1.push跳转+携带params参数 ```jsx props.history.push(`/b/child1/${i ...
- 解决vue单页路由跳转后scrollTop的问题
作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...
- SpringMVC 解析(四)编程式路由
多数情况下,我们在使用Spring的Controller时,会使用@RequestMapping的形式把请求按照URL路由到指定方法上.Spring还提供了一种编程的方式去实现请求和路由方法之间的路由 ...
- vue 路由 及 跳转传递参数的总结
博客地址:https://ainyi.com/4 vue-router vue-router 是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基 ...
随机推荐
- win10提示防火墙没有法更改某些设置的处理办法
一.问题发现 远程链接电脑时间发现远程链接失败 提问在“控制面板” 中打开“程序” 列表中启用“windows 防火墙” . 按照提示启用防火墙 ,发现启用或关闭页面不可编辑 二.原因是防火墙Wind ...
- bzoj 4754: [Jsoi2016]独特的树叶
不得不说这是神题. %%% http://blog.csdn.net/samjia2000/article/details/51762811 #include <cstdio> #in ...
- System.Data.SqlClient.SqlException: 'Incorrect syntax near 'OFFSET'.
https://www.nopcommerce.com/boards/t/54586/410-not-running-on-local-system.aspx#209684 Hello, I was ...
- spark aggregate算子
spark aggregate源代码 /** * Aggregate the elements of each partition, and then the results for all the ...
- java基础源码 (6)--ArrayListt类
原作出处:https://www.cnblogs.com/leesf456/p/5308358.html 简介: 1.ArrayList是一个数组队列,相当于动态数组.与java中的数组相比,它的容量 ...
- HDU - 1166 敌兵布阵 (线段树---点修改)
题意: 1.Add i j,i和j为正整数,表示第i个营地增加j个人(j不超过30) 2.Sub i j ,i和j为正整数,表示第i个营地减少j个人(j不超过30); 3.Query i j ,i和j ...
- C++面试常见问题——08const关键字
const 类内定义 类型名 函数名(参数列表) const{ //函数体: } 类外定义 类内申明 类型名 函数名(参数列表): 类外定义 类型名 类名::函数名(参数列表){ //函数体: ...
- cf 543 D. Road Improvement
(懒得想了,,又是DP) #include<bits/stdc++.h> #define N 200005 #define LL long long #define inf 0x3f3f3 ...
- 干货分享|留学Essay怎么写?
留学生活其实就是分割成一个个deadline,留学就是赶完一个又一个deadline.朋友同学的革命情感源自赶一个个deadline时候的不离不弃,相知相守,无数个夜里大家群里打卡,你今天Essay写 ...
- goroutine简介
一.goroutine简介 Golang中最迷人的一个优点就是从语言层面就支持并发 在Golang中的goroutine(协程)类似于其他语言的线程 并发和并行 并行(parallelism)指不同的 ...