快捷導(dǎo)航

使用vue-router在Vue頁面之間傳遞數(shù)據(jù)的方法

更新時(shí)間：2019年07月15日 10:21:19 作者：尖銳Ax

這篇文章主要介紹了使用vue-router在Vue頁面之間傳遞數(shù)據(jù)的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

幾周前，我寫了關(guān)于 Vue 路由的使用和在 Vue 頁面導(dǎo)航的文章。這是在應(yīng)用程序中探索的一個(gè)基本例子。

通常，在將導(dǎo)航構(gòu)建到應(yīng)用程序中時(shí)，您會(huì)發(fā)現(xiàn)需要將數(shù)據(jù)從一個(gè)頁面?zhèn)鬟f到另一個(gè)頁面。（不通順）例如，您遵循 master-detail 模式，其中您有一個(gè)數(shù)據(jù)列表，通過更深入地挖掘可以獲得關(guān)于列表中特定項(xiàng)的更多信息。

我們將學(xué)習(xí)如何使用路由和 URL參數(shù)以及查詢參數(shù)在 Vue 頁面之間傳遞數(shù)據(jù)。

如果你還沒有讀過我之前的教程或者不熟悉 vue-router 庫，我建議你溫習(xí)一下。

利用 URL 參數(shù)在不同頁面中傳遞數(shù)據(jù)

假設(shè)您有一個(gè) web 應(yīng)用程序，它顯示從某個(gè)數(shù)據(jù)庫獲得的用戶列表。這個(gè)列表可能只包含姓名信息，但是數(shù)據(jù)庫中的數(shù)據(jù)可能包含更多的信息，例如地址、電話等。

在典型的場景中，我們使用主鍵或其他標(biāo)識(shí)符維護(hù)這個(gè)用戶列表，并用于在請求詳細(xì)信息時(shí)查詢數(shù)據(jù)庫時(shí)。這樣的值可非常合適作為 URL 參數(shù)在不同頁面?zhèn)鬟f。

為此，目標(biāo)頁面需要獲取到 URL 參數(shù)。在前面的教程基礎(chǔ)上，我們可以將項(xiàng)目 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 的路由中路徑中包含一個(gè) :id。這個(gè)冒號(hào)表示我們正在處理一個(gè)變量

打開項(xiàng)目src/components/page1.vue文件，將<template>塊改為下面的樣子，獲取 URL 中的參數(shù)

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

在上面的代碼片段中，我們選擇將參數(shù)傳遞給指定的路由。該 id 將匹配先前在路由定義的參數(shù)。您可以定義多個(gè)參數(shù)，但是要小心，因?yàn)樗鼈兒苋菀自斐蓡栴}

在接收端，我們需要弄清楚如何獲取和處理路由參數(shù)。

打開 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>

與之前的例子相比，我們在上面的組件增加了一些內(nèi)容

首先，您將注意到我們正在data方法中初始化一個(gè)id值。這是為了防止出現(xiàn)任何未定義的錯(cuò)誤

每次創(chuàng)建組件時(shí)，Vue 都會(huì)調(diào)用其生命周期鉤子的 Created 方法。在Created方法中，我們從$route獲得傳遞的id值,并將其設(shè)置為局部變量。這個(gè)本地id變量在<template>塊中

但是，如果我們需求傳遞更復(fù)雜的參數(shù)或者是可選參數(shù)，這時(shí)候就該換一種方式了

利用 Query 參數(shù)傳遞數(shù)據(jù)

Vue 中的查詢參數(shù)與路由器參數(shù)的工作原理類似，但它們不是必需的，而且你并不需要事先修改路由

回到之前的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或路由器參數(shù)以及一組新的Query參數(shù)。這些Query參數(shù)可以是任意數(shù)量的鍵值對(duì)

我們來看一下在接受端怎么處理這些 Query 參數(shù)

打開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>

就像使用路由器參數(shù)一樣，我們在 data 方法中初始化了一個(gè)占位符變量。在Created方法中，我們檢查Query參數(shù)中是否存在 debug 參數(shù)，如果存在，將其設(shè)置為本地變量

<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變量

總結(jié)

本文你學(xué)到了如何使用 URL 參數(shù)和Query參數(shù)在 Vue 應(yīng)用程序中的路由之間傳遞數(shù)據(jù)。如果你沒有讀過我上一篇關(guān)于頁面導(dǎo)航的文章，你看到的一些東西可能沒有多大意義。如果你還沒有看過，我建議你去看看

via: https://www.thepolyglotdeveloper.com/2017/11/pass-data-between-routes-vuejs-web-application/

譯者：Alex1996a

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: