Vue3中路由跳转的语法

简介: Vue3中路由跳转的语法

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

相关文章
|
4天前
|
JavaScript
vue3- antd design vue 引入iconfont
vue3- antd design vue 引入iconfont
|
3天前
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
21 1
|
12天前
|
缓存 监控 UED
升级 Vue3 时,如何减少打包体积的增加?
升级 Vue3 时,如何减少打包体积的增加?
109 59
|
12天前
|
JavaScript
在vue3中(vite)引入unocss,安装配置unocss
在vue3中(vite)引入unocss,安装配置unocss
|
4天前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
21 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
1天前
|
JavaScript API 开发者
关于vue3中v-model做了哪些升级 ?
【10月更文挑战第1天】
97 59
|
2天前
|
监控 JavaScript 安全
vue3添加pinia
本文介绍了Pinia作为Vue 3的状态管理库的特点,包括其基于Vue 3的Composition API、响应式状态管理、零依赖设计、插件系统、Devtools集成、Tree-shakable特性以及对TypeScript的支持,并详细说明了如何在Vue 3项目中安装和初始化Pinia。
8 0
vue3添加pinia
|
2天前
|
JavaScript
vue3完整教程从入门到精通(新人必学2,搭建项目)
本文介绍了如何在Vue 3项目中安装并验证Element Plus UI框架,包括使用npm安装Element Plus、在main.js中引入并使用该框架,以及在App.vue中添加一个按钮组件来测试Element Plus是否成功安装。
11 0
vue3完整教程从入门到精通(新人必学2,搭建项目)
|
2天前
|
JavaScript Java CDN
vue3完整教程从入门到精通(新人必学1,vue3快速上手)
本文提供了Vue 3从入门到精通的完整教程,涵盖了创建Vue应用、通过CDN使用Vue、定义网站以及使用ES模块构建版本的步骤和示例代码。
12 0
vue3完整教程从入门到精通(新人必学1,vue3快速上手)
|
1天前
|
存储 资源调度 JavaScript
Vite是什么?怎样使用Vite创建Vue3项目?
Vite是什么?怎样使用Vite创建Vue3项目?
5 0