vue3 路由跳转

vue3新增了useRouter和useRoute

在需要跳转的页面引入useRouter
import { useRouter } from 'vue-router'
在跳转页面引入userRoute获取参数
import {useRoute} from 'vue-router'

一.路由跳转

需要跳转的页面home.vue

import {useRouter} from 'vue-router'
const router=useRouter()
//字符串
router.push('pageName')
//对象
router.push({path:'/page')
router.push({name:'page')
//传参
// /page/123  需要在路由中设置 path:'/page/:id'
router.push({name:'page',params:{id:123})
router.push({path:'/page/${id}') //注：path会忽略params，要这样写才生效
// /page?id=123
router.push({path:'/page',query:{id:123})

接收页面page.vue

import {useRoute} from 'vue-router'
const route=useRoute();
//params
const id=route.params.id;
//query
const id=route.query.id