（二十七）CompositionApi 路由
（二十七）CompositionApi 路由
老怪兽
发布于 2023-02-22 18:49:07
发布于 2023-02-22 18:49:07
代码可运行
运行总次数：0
代码可运行
CompositionApi 路由
说明
因为在 compositionApi 当中无法访问 this 所以在 compositionApi 当中使用路由时另外一种方式
一、 compositionApi 使用 route 的语法
// 1. 需要引入
import { useRouter } from 'vue-router'
// 使用 useRouter 返回的实例
const route = useRoute()
route.params.postId二、监听数据的变化从新获取数据
watchEffect( () => {
blogPost.value = getBLogPostById(route.params.postId)
}) 三、编程式导航，访问 router 对象
const route = useRouter()
function next() {
router.push(`/${blogPost.value.id + 1}`)
}四、组件导航守卫
onBeforeRouteUpdate( (to, from) => {
console.log(to, from)
})
onBeforeRouteLeave( (to, from) => {
console.log(to, from)
}) 五、routerLink
// 对自定义封装 router-link 参数那些可以使用 useLink 获取
import { useLink } from 'vue-router'
setup(props) {
const { navigate } = useLink(posts)
return { navigate }
}beforeRouteEntrer, 因为在script setup中无法定义，可以通过script共存的特性把他定义在setup外面
<script>
export default {
beforeRouteEntrer: (to, from ) => {
console.log(to, from)
}
}
</script>
<script>/* ... */</script>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022年11月14日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
