我们以之前写的用户详情页为例，把之前获取参数的功能改写为组合API的方式。
之前vueDetail.vue的代码：
<template>
<div class="page">用户详情页获取到了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>
下面我们来使用组合API获取参数，
获取到route对象，需要导入useRoute方法：
import { useRoute } from 'vue-router'
调用useRoute就可以获取到route对象了
const route = useRoute()
然后我们就可以把useDetail.vue的script部分改成组合API了：
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute() // 新增
const id = ref('')
const name = ref('')
onMounted(() => {
id.value = route.params.id // 新增
name.value = route.query.name // 新增
})
return {
id,
name,
}
},
}
同样，可以使用useRouter方法获取router对象，咱们再增加一个div，点击后进入首页：
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
export default {
setup() {
const route = useRoute()
const id = ref('')
const name = ref('')
onMounted(() => {
id.value = route.params.id
name.value = route.query.name
})
const router = useRouter() // 新增
const onBack = () => {
router.push('/index') // 新增
}
return {
id,
name,
onBack,
}
},
}
这节课内容就是这些了，只要调用useRoute和useRouter就可以获取到route和router对象了。大家可以自己写一写，试一试。
