溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
幾周前，我寫了關于 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">
<h2>{{ msg }}</h2>
<router-link :to="{ name: 'Page2', params: { id: 1234 } }">Navigate to Page2</router-link>
</div>
</template>
在上面的代碼片段中，我們選擇將參數傳遞給指定的路由。該 id 將匹配先前在路由定義的參數。您可以定義多個參數，但是要小心，因為它們很容易造成問題
在接收端，我們需要弄清楚如何獲取和處理路由參數。
打開 src/components/page2.vue 文件:
<template>
<div class="hello">
<h2>{{ msg }}, your id is {{ id }}</h2>
<a 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>
h2, h3 {
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">
<h2>{{ msg }}</h2>
<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">
<h2>{{ msg }}, your id is {{ id }}</h2>
<p>Debug mode is currently set to {{ debug }}</p>
<a v-on:click="navigate()">Navigate to Page1</a>
</div>
</template>
在上面的<template> 塊中，我們展示debug變量
總結
本文你學到了如何使用 URL 參數和Query參數在 Vue 應用程序中的路由之間傳遞數據。如果你沒有讀過我上一篇關于頁面導航的文章，你看到的一些東西可能沒有多大意義。如果你還沒有看過，我建議你去看看
via: https://www.thepolyglotdeveloper.com/2017/11/pass-data-between-routes-vuejs-web-application/
譯者：Alex1996a
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
