使用 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