Vue3中路由跳转的语法

作者: 头发飘逸 | 来源:发表于2023-02-23 01:12 被阅读0次

Vue 2 可以直接在组件里使用 this. $route 来获取当前路由信息不同，在 Vue 3 的组件里，Vue 实例既没有了 this，也没有了$ route

解决方法为：
1.导入useRouter函数

import { useRouter } from "vue-router";

2.在进入setup函数时执行

const router = useRouter()

3.在setup函数中进行路由跳转

router.push('/master/pageView2?name=1')

router.push({
    path: '/master/pageView2',
    query: {
        name:'1'
    },
})

这里翻开官方文档以及例子都是用的name，但是我这里一直报错，用path发现可正常跳转了

image.png

vue 粘贴板
vue3 路由跳转交互
Vue路由重定向
路由对象$router 路由跳转方法：push() 语法：$router.push('url') 分写与合写方式的...
vue3 +viete 的路由跳转 setup中
ionic4.X中的路由跳转以及NavController
ionic中的路由跳转是实打实的延续了Angular中的路由跳转方式新创建两个组件，angular普通的方式跳转...
Vue路由编程式的导航、 hash 模式改为History 模
路由编程式的导航路由跳转中的跳转方式，类似于html中a连...
Flutter 路由
flutter 路由页面跳转在flutter中界面就是组件Flutter 中的路由通俗的讲就是页面跳转。在 F...
vue3 路由跳转相关
需求：点击按钮实现页面跳转&&触发浏览器的回到上一页/下一页，页面和按钮效果实时变化。方法：监听路由变化，v...
tsx开发vue3：从零到全面覆盖
本篇介绍在vue3中使用tsx的使用方法，之前博主有一篇根据路由生成菜单的文章，里面也介绍了jsx语法的基本使用：...
react navigation 页面跳转
注册路由页面跳转正常页面跳转，仅一次：在路由堆栈中添加新路由，可多次：返回上一路由：返回堆栈中第一个页面：
路由跳转（非命名路由）
单纯跳转：路由传值跳转：路由传值返回跳转：