Vue-router-路由传参
Vue-路由传参
在vue中,页面路由里不再只能由 ?key=value 的形式传递参数
还可以使用路径参数的方式传递参数
路径参数
router.js 路由规则
准备页面ShowDetail,并在路由规则中添加路径映射
routes: [
{
path: "/showDetail/:id/:laguage",
component: ShowDetail
},
……
]
这里的/:id/:laguage是占位符,而不是路径名
App.vue 声明式路由传参
使用router-link标签路由到ShowDetial组件
<router-link to="/showDetail/1/java">声明式路由路径传参</router-link>
这里的/1/java都是路径传参,与路由规则中的占位符相呼应
App.vue 编程式路由传参
无论是声明式路由还是编程式路由,都是针对路由规则中提前编写好的占位符赋值,没有本质区别
<script setup>
import { useRouter } from "vue-router"
const router = useRouter()
function showDetail(id, name){
// 两种不同的实现方法
// router.push(`/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监听响应式数据来实现
<script setup>
// 接受传递过来的路径参数
// 这里使用useRoute,而不是useRouter
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,并在路由规则中添加路径映射
routes: [
{
path: "/showDetail2",
component: ShowDetail2
},
……
]
与路径参数不同,键值对参数中对路径不做任何修改
App.vue 声明式路由传参
使用router-link标签路由到ShowDetial2组件
<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
<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监听响应式数据来实现
<script setup>
// 接受传递过来的键值对
// 这里使用useRoute,而不是useRouter
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工具更好的实现组件间传参,仍然白学 😓