vue3中的route和router

因为我们在 setup 里面没有访问 this，所以我们不能再直接访问 this.$router 或 this.$route。作为替代，我们使用 useRouter 和useRoute函数,或者 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>
1
2
3
4
5
6
7
8
9
10
11
12
13

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

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

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