开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天，点击查看活动详情
Vue Router 是 Vue 的官方路由，在 Vue3 中，路由跳转和传参的实现方式相较 Vue2 发生了变化，接下来一起了解一下关于 Vue3 的路由跳转及传参。
Vue2 的路由形式
在 Vue2 中，我们这会这样来路由跳转以及传参：
this.$router.push({ path:'/home', query:{ msg:'hello' } })
用这样的方式来读取和接收路由参数：
var name = this.$route.query.msg;
Vue3 的路由形式
在 源文件 vue-router.d.ts 中可以查看到相关的定义：
- useRouter：返回当前路由位置，相当于 vue2 的 this.$router
- useRoute：返回路由实例，相当于 vue2 的 this.$route
其中，useRouter 返回的是 router 实例对象，它是通过 new VueRouter() （或 createRouter()） 来创建的路由实例对象，它是全局的，包含了所有的路由、以及相关的方法和属性。
在控制图输出 useRouter 实例，如下：
useRoute 返回的是 route 对象（一个跳转的路由对象），它是是局部对的象。
在控制图输出 useRoute 实例，如下：
使用方式
第一步：引入，代码如下：
import { useRoute, useRouter } from "vue-router"
Vue3 中要注意的是，router = useRouter() 的执行要放在 setup() 中，并且不需要返回 router 或 route
第二步：使用：跳转及传参，后续相关的操作与 Vue2 类似（动态路由传参也与 Vue2 类似），代码如下：
setup(){
const router = useRouter()
router.push({
path: '/home',
// name: 'home',
query: {
msg: 'hello'
}
})
}
第三步：接收参数，代码如下：
setup() {
const route = useRoute()
console.log(route.query)
}
显式路由和隐式路由
有路由跳转的时候可以配置 name 、 path ，传参方式也有 params 、query 两种。
- params 隐式路由传参
- query 显式路由传参
（显式时数据会跟在 url 之后，而隐式不会。隐式时要注意刷新页面params可能会消失，可将数据存在缓存中）
具体官方可参考：useRoute API
