Vue路由跳转传参相关

前言

本文将介绍利用queryparam两种方式进行不同路由间的参数传递。

在写项目时遇到路由间参数传递的需求,查看之前学习记录相关的部分,总结的有些混乱。故有此篇,重新整理一下。

需求如下:

从登录界面(/login)跳转至主页(/home)要携带用户名信息

后端简单利用flask编写,登录发起的请求返回如下:


正文

param

路由的注册信息如下(index.js):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const routes = [
{
path:'/',
redirect: 'login'
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/home',
name: 'Home',
component: Home
}
]

Login.vue的登录方法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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的接收:

1
2
3
4
5
6
<template>
<div>
<h1>欢迎:{{this.$route.params.username}}</h1>
<el-button type="info" @click="logout">退出登录</el-button>
</div>
</template>

效果如下:

小结:

  • 路由配置信息:

    1
    {path: '/home', name: 'Home', component: Home}
  • 路由跳转格式:

    1
    this.$router.push({name: 'Home', params:{username:res.username}})
  • 参数接收格式:

    1
    this.$route.params.username
  • 特点:

    1. 相当于post请求,传递的参数不会在url中显示,具有一定程度的保密性
    2. 刷新页面后会丢失params传递的数据

query

路由的注册信息如下(index.js):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const routes = [
{
path:'/',
redirect: 'login'
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/home',
name: 'Home',
component: Home
}
]

Login.vue的登录方法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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的接收:

1
2
3
4
5
6
<template>
<div>
<h1>欢迎:{{this.$route.query.username}}</h1>
<el-button type="info" @click="logout">退出登录</el-button>
</div>
</template>

效果如下:

小结:

  • 路由配置信息:

    1
    {path: '/home', name: 'Home', component: Home}
  • 路由跳转格式:

    1
    this.$router.push({path: '/home', query:{username:res.username}})
  • 参数接收格式:

    1
    this.$route.query.username
  • 特点:

    1. 相当于get请求,传递的参数会显示在url中
    2. 在url中更改信息,页面中的显示也会随之改变
    3. 刷新页面后不会造成传递的数据丢失

后记

各有优劣,按需使用。