使用 vue-router 进行页面导航时的参数处理

本文演示如何在vue-router导航中传递参数。

本文使用的案例为 使用 vue-router 进行页面导航 中构建的例子,如果对于在 vue 中进行页面导航的知识还不熟悉,请先参考该文。

在编程式中传递参数

使用 vue-router 进行页面导航 中,我们使用:

1
this.$router.push('/home')

来实现从 Splash 页面跳转到 Home 页面。在调用中直接通过字符串的方式指名了要导航的目标路径(界面)。这种方法看起来很简单,但却有不能传递参数的缺点。要传递参数,需要在 push 方法中使用json对象作为参数。

例如,我们需要从 Splash 界面传递一个 clickAd 的 boolean 参数到 Home 界面,则可以这样将跳转的代码改为:

1
this.$router.push({ name: 'home', params: {clickAd: false}})

注意:这里使用的 name 是在 router.js 文件中定义的每一个路由规则的 name 值

1
2
3
4
5
{
path: '/home',
name: 'home',
component: Home
}

在 Home 界面,可以使用 $route 对象来获取传递过来的参数:

1
this.$route.params.clickAd

注意:导航时使用的是 $router 对象,接收时使用的是 $route 对象

改造后的完整代码如下:

Splash.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
<div>
<h1>Splash</h1>
<button v-on:click="goHome">Go to Home</button>
</div>
</template>

<script>
export default {
name: 'splash',
methods: {
goHome: function() {
this.$router.push({ name: 'home', params: {clickAd: false}})
}
}
}
</script>

<style>

</style>

Home.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
<div>
<h1>Home page: clickAd = {{this.$route.params.clickAd}}</h1>
</div>
</template>

<script>
export default {
name: 'home'

}
</script>

<style>

</style>

在声明式中传递参数

在声明式中,只需要简单的将原来的字符串换为json对象即可:

原代码:

1
<router-link to="/home">Link to Home</router-link>

修改后的代码:

1
<router-link v-bind:to="{ name: 'home', params: {clickAd: false}}">Link to Home</router-link>

注意: 这里使用了 v-bind 指令来来绑定参数

接收方的代码不用改变, 还是使用 this.$route.params.clickAd 进行接收。

本文标题:使用 vue-router 进行页面导航时的参数处理

文章作者:梅老师

发布时间:2019年09月21日 - 07:09

最后更新:2020年05月28日 - 16:05

原始链接:https://www.mls-tech.info/web/vue/vue-router-params/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。