router编程式路由

  1. 1. vue3 编程式导航跳转路由

vue3 编程式导航跳转路由

由于vue3中没有this,所以我们想要直接使用routerroute的话,会有些不方便,于是我开始寻找,寻找到了以下方法

  • 直接从vue-router中解构出useRouteruseRoute
1
import { useRouter , useRoute } from 'vue-router'

setup中定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
setup(){
const $router=useRouter()

// 对象 $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' })
}

链接:https://juejin.cn/post/7033270093282967559