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中会携带这些参数

转载于:https://www.cnblogs.com/XHappyness/p/7358473.html

vue2.0 vue-cli项目中路由之间的参数传递相关推荐

Vue.JS项目中二级路由下刷新浏览器仍呈现当前路由的实现方案
1.需求介绍: 以下介绍一下实现起来没什么疑问的需求:设备列表为一个主页,点击设备列表中的编辑按钮,进入设备信息主页面,默认打开设备配置页,点击设备状态.设备日志.固件升级,会切换下方内容. 本人对以 ...
[vue] vue2.0不再支持v-html中使用过滤器了怎么办？
[vue] vue2.0不再支持v-html中使用过滤器了怎么办? 在method中定义方法 htmlFilter(htmlString){ return htmlString.replace(/+s ...
vue+elementUI项目中使用NavMenu导航菜单
vue+elementUI项目中使用NavMenu 导航菜单在elementUI官网组件中NavMenu 导航菜单的使用只是简单地运用,在实践项目中还需要配合路由配置.一般后台管理系统不只是导航菜单 ...
vue cli项目升级--vue cli3升级到vue cli4
原文网址:vue cli项目升级--vue cli3升级到vue cli4_IT利刃出鞘的博客-CSDN博客简介说明本文介绍如何升级vue项目的vue cli版本. 官方网址 https://c ...
多个html如何套用套一个头部,Vue.js项目中管理每个页面的头部标签的两种方法...
在 Vue SPA 应用中,如果想要修改 HTML 的头部标签,如页面的 title ,我们只能去修改 index.html 模板文件,但是这个是全局的修改,如何为每个页面都设置不一样的 title ...
Vue Cli 项目结构简述
webnode_modules --Vue Cli 项目以来的js模块全放到这里public --存放静态资源存放自己的js cssfavicon.ico -- 浏览器小图标index.html - ...
html调用腾讯地图定位当前位置,vue web项目中调用腾讯地图API获取当前位置的经纬度...
vue web项目中调用腾讯地图API获取当前位置的经纬度 vue web项目中调用腾讯地图API获取当前位置的经纬度在main.js 中添加一下代码 import axios from 'axio ...
Vue项目9：Vue Cli项目使用echarts可视化
Vue Cli项目使用echarts可视化有两种方式:一.直接引入echarts 二.使用vue-ehcarts. 一.直接引入echarts 1.创建Vue Cli项目进入cmd命令行,输入如 ...
vue cli 项目在打包时候报错 API fatal error handler returned after process out of memory
问题描述 vue cli 项目在打包时候报错:API fatal error handler returned after process out of memory. 问题分析从给出的提示可以看出 ...

vue2.0 vue-cli项目中路由之间的参数传递

vue2.0 vue-cli项目中路由之间的参数传递相关推荐

最新文章

热门文章