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

相关文章
|
1天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
1天前
|
前端开发 JavaScript
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
|
1天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
5天前
|
JavaScript Java API
vue3知识点:setup
vue3知识点:setup
18 5
|
5天前
|
API
vue3知识点:reactive对比ref
vue3知识点:reactive对比ref
15 3
|
5天前
|
JavaScript API
vue3知识点:ref函数
vue3知识点:ref函数
15 2
|
5天前
|
JavaScript API
Vue3快速上手简介
Vue3快速上手简介
18 2
|
5天前
|
API
vue3知识点:reactive函数
vue3知识点:reactive函数
13 1
|
3天前
|
JavaScript UED
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
16 0
|
5天前
|
JavaScript 前端开发 API
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
11 0