vue2.0 vue-cli项目中路由之间的参数传递
1.首先配置路由,
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'home', component: require('../components/home.vue'), children: [ { path: 'user', name: 'user', component: require('../components/user/user.vue'), }, ] }, { path: '/login', name: 'login', component: require('../components/login/login.vue'), } ] })
2. 假设从login页面跳转到home页面,需要传递userName参数
那么login.ts中:
this.$router.push({ path:'/', query: { userName: this.loginForm.username } });
home.ts中接收参数:
this.userName = this.$route.query.userName
假设从home页面跳转到user子路由,需要传递UserRoleType 和 solutionID两个参数
home.ts中:
this.$router.push({ path:'user', query:{ userRoleType: this.userRoleType, solutionID: this.selectedSolutionID } });
user.ts中接收参数:
this.UserRoleType = Number(this.$route.query.userRoleType); this.solutionID = Number(this.$route.query.solutionID);
注意:1. 不管传不传参数,步骤一中路由配置是不变的。2. 这样传递的参数会反映到url中,即url中会携带这些参数
vue2.0 vue-cli项目中路由之间的参数传递的更多相关文章
- vue.cli项目中src目录每个文件夹和文件的用法
assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:
- Vuex内容解析和vue cli项目中使用状态管理模式Vuex
中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...
- vue cli 项目中设置背景图
https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...
- vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值
axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...
- vue项目中路由验证和相应拦截的使用
详解Vue路由钩子及应用场景(小结):https://www.jb51.net/article/127678.htm vue项目中路由验证和相应拦截的使用:https://blog.csdn.net/ ...
- 【数据售卖平台】—— Vue2.0入门学习项目爬坑
前言:这个项目是我从零学习Vue2.0时用于练习基础知识的入门项目,包含了Vue2.0几乎所有项目都会用到的基础功能,是新手用来练手的好项目,这里温故知新对功能点做一个总结.github地址:http ...
- 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍
webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起.webpack 本 ...
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理
在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理
在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...
随机推荐
- leetcode笔记(七)529. Minesweeper
题目描述 Let's play the minesweeper game (Wikipedia, online game)! You are given a 2D char matrix repres ...
- Failed to introspect bean class [org.springframework.orm.hibernate5.LocalSessionFactoryBean] for lookup method metadata: could not find class that it depends on; nested exception is java.lang.NoClass
依赖引入 错误可能版本 不对 Failed to introspect bean class [org.springframework.orm.hibernate5.LocalSessionFact ...
- AES加密工具
public class AES { /** * 加密 * * @param content * 需要加密的内容 * @param password * 加密密码 * @return */ publi ...
- FastDFS轻量级分布式文件系统部署
FastDFS介绍 FastDFS 是一个由 C 语言实现的开源轻量级分布式文件系统,作者余庆,支持 Linux.FreeBSD.AID 等 Unix 系统,解决了大数据存储和读写负载均衡等问题,适合 ...
- vm 中 centOS 7 固定ip设置
虚拟机中,centOS通过NAT连接,设置固定IP上网. 本地主机 VMware Network Adapter VMnet8 状态信息: 描述: VMware Virtual Ethernet A ...
- python并发编程之多进程、多线程、异步、协程、通信队列Queue和池Pool的实现和应用
什么是多任务? 简单地说,就是操作系统可以同时运行多个任务.实现多任务有多种方式,线程.进程.协程. 并行和并发的区别? 并发:指的是任务数多余cpu核数,通过操作系统的各种任务调度算法,实现用多个任 ...
- mongodb的学习之旅一
描述 作为一枚菜鸟级别的coder,刚接触nodejs没有多久.现在在学习微信公众号的开发,但是碰到了mongodb保存用户数据的时候,出现了DeprecationWarning: Mongoose: ...
- HDU暑假多校第八场G-Card Game
一.题意 给出N个卡牌,卡牌的正反两面具有两个数字,取值范围为[1,2*n],给出若干个默认正面向上的卡牌,求最小反转多少张卡牌可以使得,每张卡牌朝上的面上都有一个不同的数字,同时满足最小反转次数的反 ...
- 521. [NOIP2010] 引水入城 cogs
521. [NOIP2010] 引水入城 ★★★ 输入文件:flow.in 输出文件:flow.out 简单对比时间限制:1 s 内存限制:128 MB 在一个遥远的国度,一侧是风景秀 ...
- 算法-----数组------ 数组中的第K个最大元素
在未排序的数组中找到第 k 个最大的元素.请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素. 示例 1: 输入: [3,2,1,5,6,4] 和 k = 2 输出: 5 ...