vue3点击跳转页面

心为醒SS

于 2023-02-05 11:43:39 发布

阅读量7.8k

点赞数 4

CC 4.0 BY-SA版权

文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/Heartnottowake/article/details/128889270

在Vue3组件中，通过引入`useRouter`和`useStore`，可以在点击事件中定义方法进行页面跳转。例如，使用`router.push(/testHome/123)`可以跳转到指定路由并传递参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3跳转页面

在点击事件的页面
<template>
  <button @click="jump">按钮跳转</button>
  <router-view></router-view>
</template>

<script>
    import {useStore} from '@/store/index'
    //先是引入useRouter
    import {useRouter} from 'vue-router'
    export default {
      setup(){
        const store = useStore()
        const router = useRouter()
        //通过定义一个方法，使用router进行跳转，这里后面的123是路由传参，不传可以不加
        const jump =()=>{
          router.push('/testHome/123')
        }
        return {
          store,
          //这里暴露一下jump方法
          jump
        }
      }
    }
</script>