vue3 使用 如何进行编程式导航跳转路由

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中的编程式导航一样了

传送门

---编程式的导航 | Vue Router (vuejs.org)