在實(shí)際開發(fā)中跳轉(zhuǎn)頁面時(shí)旭愧，我們經(jīng)常要把上一頁的數(shù)據(jù)傳遞到下一個(gè)頁面堕绩，比如我們有一個(gè)用戶列表部蛇，在列表頁點(diǎn)擊了一個(gè)用戶，進(jìn)到用戶詳情頁狈涮，那么用戶詳情頁就需要知道用戶在列表頁點(diǎn)擊的是哪個(gè)用戶狐胎，然后再展示相應(yīng)的詳情。這時(shí)候就需要我們用路由把用戶的id傳到詳情頁歌馍，在vue-router有兩種方式可以傳遞參數(shù)
1）動(dòng)態(tài)路由
動(dòng)態(tài)路由的形式是這樣的
/userDetail/:id
我們發(fā)現(xiàn)路由里有一個(gè)冒號握巢，這就表示它是一個(gè)動(dòng)態(tài)路由，我們還是來寫一個(gè)例子松却，
1）在views下創(chuàng)建一個(gè)新的頁面暴浦，userDetail.vue
<template>
<div>用戶詳情頁獲取到了id：{{ id }}</div>
</template>
<script>
export default {
data() {
return {
id: '',
}
},
mounted() {},
}
</script>
<style></style>
我們把頁面上基本內(nèi)容寫上，現(xiàn)在id是空晓锻，因?yàn)槲覀冞€沒有獲取
2）在router.js中導(dǎo)入新的頁面歌焦，并且為它對應(yīng)上路由
import { createRouter, createWebHistory } from 'vue-router'
import index from './views/index'
import list from './views/list'
import userDetail from './views/userDetail' // 新增的頁面
const routes = [
{
path: '/',
component: index,
},
{
path: '/list',
component: list,
},
{
path: '/userDetail/:id', // 新增的路由，前一部分/userDetial是固定路由砚哆，后面:id說明是動(dòng)態(tài)路由
component: userDetail,
},
]
const router = createRouter({
history: createWebHistory(),
routes,
})
export default router
在列表頁我們寫點(diǎn)模擬數(shù)據(jù)独撇，渲染出來一個(gè)用戶列表，在列表中我們增加router-link躁锁，實(shí)現(xiàn)跳轉(zhuǎn)頁面的效果
<template>
<div>這里是列表頁</div>
<router-link to="/">點(diǎn)擊跳轉(zhuǎn)到首頁</router-link>
<ul>
<li v-for="item in userList" :key="item.id">
<router-link :to="'/userDetail/' + item.id"
>點(diǎn)擊查看{{ item.name }}</router-link
>
</li>
</ul>
</template>
<script>
export default {
data() {
return {
userList: [
{
name: '亞歷山大',
id: '01',
},
{
name: '凱撒',
id: '02',
},
{
name: '屋大維',
id: '03',
},
],
}
},
}
</script>
<style></style>
我們可以發(fā)現(xiàn)這次我們的router-link里面to屬性是有冒號的纷铣，說明它現(xiàn)在動(dòng)態(tài)綁定的，前一部分是固定的字符串'/userDetail/'战转，后面加上了當(dāng)前一項(xiàng)的id搜立，渲染結(jié)果是這樣的
點(diǎn)擊鏈接我們就可以進(jìn)入到用戶詳情頁了
這時(shí)候我們需要在用戶詳情頁獲取傳過來的參數(shù)了
this.$route.params.id
這樣就可以獲取到了
需要注意兩點(diǎn)
1）這次用的是this.$route，表示當(dāng)前的路由槐秧，跟之前用的this.$router不一樣啄踊，后者表示我們在router中創(chuàng)建的那個(gè)全局管理路由的對象
2）this.$route.params是一個(gè)對象，通過動(dòng)態(tài)路由傳過來的參數(shù)都會(huì)放在這個(gè)對象里刁标，我們?nèi)〉氖莍d這個(gè)參數(shù)颠通，這里的id和路由配置時(shí)候'/userDetail/:id'這個(gè)id是相對應(yīng)的
我們在詳情頁也定義了一個(gè)id數(shù)據(jù)，以便我們使用命雀，放在模板里
<template>
<div>用戶詳情頁獲取到了id：{{ id }}</div>
</template>
<script>
export default {
data() {
return {
id: '',
}
},
mounted() {
this.id = this.$route.params.id
},
}
</script>
<style></style>
我們可以看到詳情頁就可以顯示id了
這是通過動(dòng)態(tài)路由傳參蒜哀，初學(xué)者可能理解起來比較費(fèi)勁斩箫，要自己動(dòng)手寫一寫吏砂，下面說一種簡單的
2.使用queryString傳參
例如
http://www.test.com/?a=1&b=2
在url中問號后面的a=1&b=2撵儿，就是queryString，這里表示參數(shù)a的值是1狐血，參數(shù)b的值是2
放在我們的例子中淀歇，我們現(xiàn)在把用戶的名字也傳到用戶詳情頁，使用queryString的方式來傳
像這樣
http://localhost:8080/userDetail/03?name=屋大維
改動(dòng)一下我們渲染列表的代碼匈织，
<li v-for="item in userList" :key="item.id">
<router-link :to="'/userDetail/' + item.id + '?name=' + item.name" // 拼接鏈接的時(shí)候增加了name
>點(diǎn)擊查看{{ item.name }}</router-link
>
</li>
渲染結(jié)果是：
下一步就是獲取這個(gè)參數(shù)了浪默，這么傳參有個(gè)好處，就是不用更改router.js里面的配置
那么該在用戶詳情頁直接獲取了
this.$route.query.name
這次試用query對象缀匕，和上次params不一樣纳决，
我們的參數(shù)名字是name
完整代碼是
<template>
<div>用戶詳情頁獲取到了id：{{ id }},他的名字是：{{ name }}</div>
</template>
<script>
export default {
data() {
return {
id: '',
name: '',
}
},
mounted() {
this.id = this.$route.params.id
this.name = this.$route.query.name
},
}
</script>
<style></style>
這節(jié)課我們向頁面?zhèn)鬟f參數(shù)的兩種方式都學(xué)到了，在實(shí)際開發(fā)中都很常用乡小，大家一定要掌握阔加。
