Vue-路由传参
在vue中，页面路由里不再只能由 ?key=value 的形式传递参数
还可以使用路径参数的方式传递参数
路径参数
router.js 路由规则
准备页面ShowDetail，并在路由规则中添加路径映射
1
2
3
4
5
6
7
| routes: [
{
path: "/showDetail/:id/:laguage",
component: ShowDetail
},
……
]
|
这里的/:id/:laguage是占位符，而不是路径名
App.vue 声明式路由传参
使用router-link标签路由到ShowDetial组件
1
| <router-link to="/showDetail/1/java">声明式路由路径传参</router-link>
|
这里的/1/java都是路径传参，与路由规则中的占位符相呼应
App.vue 编程式路由传参
无论是声明式路由还是编程式路由，都是针对路由规则中提前编写好的占位符赋值，没有本质区别
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <script setup>
import { useRouter } from "vue-router"
const router = useRouter()
function showDetail(id, name){
router.push({
path:`/showDetail/${id}/${name}`
})
}
</script>
<template>
<div>
<button @click="showDetail(2,'php')">编程式路由路径传参</button>
<router-view></router-view>
</div>
</template>
<style scoped>
</style>
|
ShowDetail 参数接受
在ShowDetail组件中，我们使用useRoute方法来接收参数
注：这个方法不是useRouter，那个是编程式路由的API，这个是路由传参的API！！！
使用useRoute生成route对象，用以调用不同的API
- route.params：用以接受路径参数的API
- route.query：用以接受键值对参数的API
使用生命周期的钩子函数可以在传递参数时的页面参数实时变化，个人认为这里可以使用watchEffect监听响应式数据来实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| <script setup>
import { useRoute } from 'vue-router';
import { ref ,onUpdated} from 'vue';
const route = useRoute()
let languageId = ref(0)
let languageName = ref("")
languageId.value = route.params.id
languageName.value = route.params.language
onUpdated(()=>{
languageId.value = route.params.id
languageName.value = route.params.language
})
</script>
<template>
<div>
<h1>接受路径参数</h1>
<h3>{{languageId}}{{languageName}}是世界上最好的编程语言</h3>
</div>
</template>
<style scoped>
</style>
|
键值对参数
router.js 路由规则
准备页面ShowDetail2，并在路由规则中添加路径映射
1
2
3
4
5
6
7
| routes: [
{
path: "/showDetail2",
component: ShowDetail2
},
……
]
|
与路径参数不同，键值对参数中对路径不做任何修改
App.vue 声明式路由传参
使用router-link标签路由到ShowDetial2组件
1
2
| <router-link to="/showDetail2?id=1&language=java">声明式路由键值对传参1</router-link>
<router-link v-bind:to="{path:'/showDetail2',query:{id:2,language:'php'}}">声明式路由键值对传参2</router-link>
|
第一种方式就很熟悉了，用常见的?key=value就可以传递键值对参数
第二种方式使用v-bind绑定to属性，就可以以对象的形式对to属性赋值，这种方式对参数个数，内容的使用更加灵活
App.vue 编程式路由传参
与之对应的，编程式路由也有俩种写法
将router.push的参数写成对象的形式时，query就负责存放传递的键值对
注：为了区分变量名，我们将形参改为paraId和paramLanguage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <script setup>
import { useRouter } from "vue-router"
const router = useRouter()
function showDetail2(id, language){
router.push(`/showDetail2?id=${id}&language=${language}`)
}
function showDetail2(paramId, paramLanguage){
router.push({
path:`/showDetail2`，
query:{id:paramId,language:paramLanguage}
})
}
</script>
<template>
<div>
<button @click="showDetail2(3,'python')">编程式路由键值对传参</button>
<router-view></router-view>
</div>
</template>
<style scoped>
</style>
|
ShowDetail 参数接受
在ShowDetail组件中，我们使用useRoute方法来接收参数
注：这个方法不是useRouter，那个是编程式路由的API，这个是路由传参的API！！！
使用useRoute生成route对象，用以调用不同的API
- route.params：用以接受路径参数的API
- route.query：用以接受键值对参数的API
使用生命周期的钩子函数可以在传递参数时的页面参数实时变化，个人认为这里可以使用watchEffect监听响应式数据来实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| <script setup>
import { useRoute } from 'vue-router';
import { ref ,onUpdated} from 'vue';
const route = useRoute()
let languageId = ref(0)
let languageName = ref("")
languageId.value = route.query.id
languageName.value = route.query.language
onUpdated(()=>{
languageId.value = route.query.id
languageName.value = route.query.language
})
</script>
<template>
<div>
<h1>接受键值对参数</h1>
<h3>{{languageId}}{{languageName}}是世界上最好的编程语言</h3>
</div>
</template>
<style scoped>
</style>
|
然而，路由传参其实也算是组件之间的参数传递，我们最后仍然是使用Pinia工具更好的实现组件间传参，仍然白学 😓