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

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

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

在编程式中传递参数

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

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

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

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

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

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

{
    path: '/home',
    name: 'home',
    component: Home
}

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

this.$route.params.clickAd

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

改造后的完整代码如下:

Splash.vue

<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

<template>
    <div>
        <h1>Home page: clickAd = {{this.$route.params.clickAd}}</h1>
    </div>
</template>

<script>
export default {
    name: 'home'
    
}
</script>

<style>

</style>

在声明式中传递参数

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

原代码:

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

修改后的代码:

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

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

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