使用 vue-router 在 Vue 页面之间传递数据

前言

几周前，我写了关于 Vue 路由的使用和在 Vue 页面导航的文章。这是在应用程序中探索的一个基本例子。

一般，在将导航构建到应用程序中时，您会发现须要将数据从一个页面传递到另外一个页面。（不通顺）例如，您遵循 master-detail 模式，其中您有一个数据列表，经过更深刻地挖掘能够得到关于列表中特定项的更多信息。

咱们将学习如何使用路由和 URL参数以及查询参数在 Vue 页面之间传递数据。

若是你尚未读过我以前的教程或者不熟悉 vue-router 库，我建议你温习一下。

利用 URL 参数在不一样页面中传递数据

假设您有一个 web 应用程序，它显示从某个数据库得到的用户列表。这个列表可能只包含姓名信息，可是数据库中的数据可能包含更多的信息，例如地址、电话等。

在典型的场景中，咱们使用主键或其余标识符维护这个用户列表，并用于在请求详细信息时查询数据库时。这样的值可很是合适做为 URL 参数在不一样页面传递。

为此，目标页面须要获取到 URL 参数。在前面的教程基础上，咱们能够将项目 src/router/index.js 中的文件更改成以下所示

import Vue from 'vue'
import Router from 'vue-router'
import Page1 from '@/components/page1'
import Page2 from '@/components/page2'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: "/",
            redirect: {
                name: "Page1"
            }
        },
        {
            path: '/page1',
            name: 'Page1',
            component: Page1
        },
        {
            path: '/page2/:id',
            name: 'Page2',
            component: Page2
        }
    ]
})

注意，Page2 的路由中路径中包含一个 :id。这个冒号表示咱们正在处理一个变量

打开项目src/components/page1.vue文件，将<template>块改成下面的样子，获取 URL 中的参数

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <router-link :to="{ name: 'Page2', params: { id: 1234 } }">Navigate to Page2</router-link>
    </div>
</template>

在上面的代码片断中，咱们选择将参数传递给指定的路由。该 id 将匹配先前在路由定义的参数。您能够定义多个参数，可是要当心，由于它们很容易形成问题

在接收端，咱们须要弄清楚如何获取和处理路由参数。

打开 src/components/page2.vue 文件:

<template>
    <div class="hello">
        <h1>{{ msg }}, your id is {{ id }}</h1>
        <a style="cursor: pointer; text-decoration: underline" v-on:click="navigate()">Navigate to Page1</a>
    </div>
</template>

<script>
    import router from '../router'

    export default {
        name: 'Page2',
        data () {
            return {
                id: 0,
                msg: 'Hey Nic Raboy'
            }
        },
        created() {
            this.id = this.$route.params.id;
        },
        methods: {
            navigate() {
                router.go(-1);
            }
        }
    }
</script>

<style scoped>
    h1, h2 {
        font-weight: normal;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }
</style>

与以前的例子相比，咱们在上面的组件增长了一些内容

首先，您将注意到咱们正在data方法中初始化一个id值。这是为了防止出现任何未定义的错误

每次建立组件时，Vue 都会调用其生命周期钩子的 Created 方法。在Created方法中，咱们从$route得到传递的id值,并将其设置为局部变量。这个本地id变量在<template>块中

可是，若是咱们需求传递更复杂的参数或者是可选参数，这时候就该换一种方式了

利用 Query 参数传递数据

Vue 中的查询参数与路由器参数的工做原理相似，但它们不是必需的，并且你并不须要事先修改路由

回到以前的src/components/page1.vue 文件上，其中 <template> 块以下：

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <router-link :to="{ name: 'Page2', params: { id: 1234 }, query: { debug: true }}">Navigate to Page2</router-link>
    </div>
</template>

注意，这一次咱们将传递URL或路由器参数以及一组新的Query参数。这些Query参数能够是任意数量的键值对

咱们来看一下在接受端怎么处理这些 Query 参数

打开src/components/page2.vue 文件， 修改<script> 以下：

<script>
    import router from '../router'

    export default {
        name: 'Page2',
        data () {
            return {
                debug: false,
                id: 0,
                msg: 'Hey Nic Raboy'
            }
        },
        created() {
            this.id = this.$route.params.id;
            if(this.$route.query.debug) {
                this.debug = this.$route.query.debug;
            }
        },
        methods: {
            navigate() {
                router.go(-1);
            }
        }
    }
</script>

就像使用路由器参数同样，咱们在 data 方法中初始化了一个占位符变量。在Created方法中，咱们检查Query参数中是否存在 debug 参数，若是存在，将其设置为本地变量

<template>
    <div class="hello">
        <h1>{{ msg }}, your id is {{ id }}</h1>
        <p>Debug mode is currently set to {{ debug }}</p>
        <a style="cursor: pointer; text-decoration: underline" v-on:click="navigate()">Navigate to Page1</a>
    </div>
</template>

在上面的<template> 块中，咱们展现debug变量

总结

本文你学到了如何使用 URL 参数和Query参数在 Vue 应用程序中的路由之间传递数据。若是你没有读过我上一篇关于页面导航的文章，你看到的一些东西可能没有多大意义。若是你尚未看过，我建议你去看看

---

via: https://www.thepolyglotdevelo...

译者：Alex1996a