vue3 编程式导航跳转路由
由于vue3中没有this
,所以我们想要直接使用router
或route
的话,会有些不方便,于是我开始寻找,寻找到了以下方法
- 直接从
vue-router
中解构出useRouter
和useRoute
import { useRouter , useRoute } from 'vue-router'
在setup
中定义
setup(){
const $router=useRouter()
const $route=useRoute()
// 对象 $router.push()可以向history对象添加新记录
$router.push({ path: 'home' })
// 命名的路由
$router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数,变成 /register?plan=private
$router.push({ path: 'register', query: { plan: 'private' }})
//$router.replace 替换当前路由不会向history对象添加记录 与push()基本一致
$router.replace({ path: 'home' })
}
接下来就和vue2中的编程式导航一样了