vue3中的route和router

文章介绍了在Vue3中,由于不再直接使用`this.$router`,而是推荐使用`useRouter`和`useRoute`函数,以及`getCurrentInstance`获取当前Vue实例来操作和获取路由信息。着重讲解了route和router的区别以及它们在组件间的传递方式。
摘要由CSDN通过智能技术生成

因为我们在 setup 里面没有访问 this,所以我们不能再直接访问 this.$router this.$route。作为替代,我们使用 useRouteruseRoute函数,或者 Vue3 中提供了一个 getCurrentInstance 方法来获取当前 Vue 实例

<script setup>
 import { useRouter, useRoute } from 'vue-router'
 const route = useRoute()
 const router = useRouter()
 router.push("/home")
</script>

//getCurrentInstance
<script setup>
 import {getCurrentInstance} from 'vue';
 const {proxy} = getCurrentInstance();
 proxy.$router.push("/home");
</script>

vue3 router是用来操作路由的,route是用来获取路由信息的。

  • route:当前激活的路由的信息对象。每个对象都是局部的,可以获取当前路由的 path,name, params, query 等属性。

  • router:全局的 router 实例。通过 vue 根实例中注入 router 实例,然后再注入到每个子组件,从而让整个应用都有路由功能。其中包含了很多属性和对象(比如 history 对象),任何页面也都可以调用其 push(), replace(), go() 等方法。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值