路由導(dǎo)航有兩種方式，分別是：聲明式導(dǎo)航 和 編程式導(dǎo)航
參數(shù)分為query參數(shù)和params參數(shù)兩種

聲明式導(dǎo)航

query參數(shù)

一、路徑字符串拼接(不推薦)

1.傳參

在路由路徑后直接拼接?參數(shù)名:參數(shù)值 ，多組參數(shù)間使用&分隔。

<RouterLink to="/path/path1?name=田本初&age=23"></RouterLink>

如果參數(shù)值為變量，需要使用模版字符串。

let str = "田本初"
<RouterLink :to=`"/path/path1?name=${str}&age=23"`></RouterLink>

2.接收與使用

// 接收
import { useRoute } from "vue-router"
const route = useRoute()// 使用
<div>{{ route.query.name }}</div>
<div>{{ route.query.age }}</div>

二、to傳對象寫法(推薦)

1.傳參

to不再傳遞字符，而是傳一個(gè)對象，由于參數(shù)為對象，所以to前需要加上:

<RouterLink :to="{ path: "/path/path1",query: {name: "田本初",age: 23}
}"/>

2.接收與使用

// 接收
import { useRoute } from "vue-router"
const route = useRoute()// 使用
<div>{{ route.query.name }}</div>
<div>{{ route.query.age }}</div>

同拼接字符串的使用方式

params參數(shù)

params參數(shù)，需要在路由規(guī)則中提前聲明參數(shù)名，參數(shù)名前不要丟失冒號 。

這里給 路由/path/path1 添加了name和age參數(shù)，由于age后添加了問號，所以age為可傳參數(shù)，否則未傳age會(huì)報(bào)錯(cuò)。

{path:"/path",component: Comp1children:[{ path:'path1/:name/:age?',component: Comp2 }]
}

一、路徑字符串拼接(不推薦)

1.傳參

在路由路徑后直接拼接/參數(shù)值 。

<RouterLink to="/path/path1/田本初/23"></RouterLink>

參數(shù)值如果是變量，使用模版字符串

let str = "田本初"
<RouterLink :to=`"/path/path1/${str}/23"`></RouterLink>

2.接收與使用

// 接收
import { useRoute } from "vue-router"
const route = useRoute()// 使用
<div>{{ route.params.name }}</div>
<div>{{ route.params.age }}</div>

二、to傳對象寫法(推薦)

1.傳參

to不再傳遞字符，而是傳一個(gè)對象，由于參數(shù)為對象，所以to前需要加上冒號

如果使用path，會(huì)報(bào)警告 ，譯為如果寫path會(huì)被忽略，請使用name。

<RouterLink :to="{ path: "/path/path1",params: {name: "田本初",age: 23}
}"/>

正確寫法：路徑使用name，注意name需保持與路由規(guī)則中的一致。

// 路由規(guī)則配置
{path:"/path",component: Comp1children:[{ name:'path1Name',path:'path1/:name/:age',component: Comp2 }]
}// 傳參
<RouterLink :to="{ name: "path1Name",params: {name: "田本初",age: 23}
}"/>

注意：params參數(shù)不能傳數(shù)組或?qū)ο?#xff0c;否則會(huì)報(bào)警告。

2.接收與使用

// 接收
import { useRoute } from "vue-router"
const route = useRoute()// 使用
<div>{{ route.params.name }}</div>
<div>{{ route.params.age }}</div>

編程式導(dǎo)航（推薦使用）

以上 <RouterLink> 標(biāo)簽的寫法是聲明式導(dǎo)航，但是開發(fā)中編程式導(dǎo)航更常用

不同于聲明式導(dǎo)航，編程式導(dǎo)航是函數(shù)形式，相比于聲明式導(dǎo)航的標(biāo)簽，更加靈活。

語法：
引入useRouter，router有兩種方式，分別為push和replace，push會(huì)保留歷史記錄，replace不會(huì)保留歷史記錄，參數(shù)對象與聲明式導(dǎo)航的對象寫法一致。

import { useRouter } from "vue-router"
const router = useRouter()function hanlder() {router.push({name:'xxx',query:{ name:'田本初', age:23}})
}

如何簡化參數(shù)使用

方法一： 解構(gòu) 配合 toRefs

如果解構(gòu)使用query/params對象，由于是直接從響應(yīng)式數(shù)據(jù)中解構(gòu)，變量會(huì)丟失響應(yīng)式，需要使用toRefs。

// 接收
import { useRoute } from "vue-router"
import { toRefs } from "vue"
const route = useRoute()
const { query } = toRefs(route)// 使用
<div>{{ query.name }}</div>

方法二：路由的props配置

方式一：將路由收到的所有params參數(shù)作為props傳給路由組件

路由規(guī)則中添加 props:true

// 路由規(guī)則配置
{ path:'/path/path1/:name/:age', component: Comp2, props: true }

使用參數(shù)時(shí)，defineProps([‘name’,‘a(chǎn)ge’])

defineProps(['name','age'])<div>{{ name }}</div>
<div>{{ age }}</div>

方式二：方式一只能處理params參數(shù)，如果想處理query參數(shù)，需要寫成函數(shù)形式

路由規(guī)則中添加props函數(shù)

// 路由規(guī)則配置
{ path:'/path/path1/:name/:age', component: Comp2, props(route){return route.query} 
}

使用參數(shù)時(shí)，defineProps([‘name’,‘a(chǎn)ge’])

defineProps(['name','age'])<div>{{ name }}</div>
<div>{{ age }}</div>

總結(jié)

• 路由導(dǎo)航分為聲明式導(dǎo)航和編程式導(dǎo)航，聲明式導(dǎo)航就是<RouterLink>標(biāo)簽，編程式導(dǎo)航就是函數(shù)形式。
• 編程式導(dǎo)航有兩種方式，push和replace，其中push會(huì)保留歷史記錄(瀏覽器可回退)，replace不會(huì)保留歷史記錄。
• query參數(shù)和params參數(shù)均有「拼接字符串寫法」和「對象寫法」，但更推薦使用to傳對象的方式。
• query拼接字符串在路徑后添加 ?參數(shù)名=參數(shù)值，多組參數(shù)間以&分隔。
• params拼接字符串在路徑后直接 /參數(shù)值即可，但需要在路由規(guī)則中提前聲明參數(shù)名，格式為path/:參數(shù)名，如果為可選參數(shù)，在參數(shù)名后添加問號。
• 對象寫法中，query參數(shù)既可以使用path又可以使用name，但是params參數(shù)只能使用name。