Vue路由跳转传参相关
前言
本文将介绍利用query和param两种方式进行不同路由间的参数传递。
在写项目时遇到路由间参数传递的需求，查看之前学习记录相关的部分，总结的有些混乱。故有此篇，重新整理一下。
需求如下： 从登录界面（
/login）跳转至主页（/home）要携带用户名信息 后端简单利用flask编写，登录发起的请求返回如下：
正文
param
路由的注册信息如下（index.js）：
const routes = [
{
path:'/',
redirect: 'login'
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/home',
name: 'Home',
component: Home
}
]Login.vue的登录方法如下：
login() {
this.$refs.loginFormRef.validate(async (valid) => {
if(!valid) {
return;
}
else {
const {data: res} = await this.$http.get('login', {params: this.loginForm});
if(res.statusCode !== 200) {
this.$message.error(res.msg);
}
else {
this.$message.success(res.msg);
window.sessionStorage.setItem('token', res.token);
//=======重点的路由跳转如下========
this.$router.push({
name: 'Home', //注意这里的参数为name，其值为路由中注册信息的name部分
params:{username:res.username} //需要向/home路由传递的参数
}).catch(() => {});
//===============================
}
}
})
}Home.vue的接收：
<template>
<div>
<h1>欢迎：{{this.$route.params.username}}</h1>
<el-button type="info" @click="logout">退出登录</el-button>
</div>
</template>效果如下：
小结：
- 路由配置信息：
{path: '/home', name: 'Home', component: Home}- 路由跳转格式：
this.$router.push({name: 'Home', params:{username:res.username}})- 参数接收格式：
this.$route.params.username- 特点：
- 相当于post请求，传递的参数不会在url中显示，具有一定程度的保密性
- 刷新页面后会丢失params传递的数据
query
路由的注册信息如下（index.js）：
const routes = [
{
path:'/',
redirect: 'login'
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/home',
name: 'Home',
component: Home
}
]Login.vue的登录方法如下：
login() {
this.$refs.loginFormRef.validate(async (valid) => {
if(!valid) {
return;
}
else {
const {data: res} = await this.$http.get('login', {params: this.loginForm});
if(res.statusCode !== 200) {
this.$message.error(res.msg);
}
else {
this.$message.success(res.msg);
window.sessionStorage.setItem('token', res.token)
//=======重点的路由跳转如下========
this.$router.push({
path: '/home', //注意这里的参数为path，其值为路由中注册信息的path部分
query:{username:res.username} //需要向/home路由传递的参数
}).catch(() => {});
//===============================
}
}
})
}Home.vue的接收：
<template>
<div>
<h1>欢迎：{{this.$route.query.username}}</h1>
<el-button type="info" @click="logout">退出登录</el-button>
</div>
</template>效果如下：
小结：
- 路由配置信息：
{path: '/home', name: 'Home', component: Home}- 路由跳转格式：
this.$router.push({path: '/home', query:{username:res.username}})- 参数接收格式：
this.$route.query.username- 特点：
- 相当于get请求，传递的参数会显示在url中
- 在url中更改信息，页面中的显示也会随之改变
- 刷新页面后不会造成传递的数据丢失
后记
各有优劣，按需使用。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-11-20，如有侵权请联系 cloudcommunity@tencent.com 删除
目录
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号