如何在Vue3组件中获取Router实例以实现编程式导航

根据你的场景，分不同组件写法给出解决方案：

1. 组合式API（<script setup>） #

这是Vue3的推荐写法，Quasar完全适配。直接使用Vue Router提供的useRouter钩子获取路由实例：

<script setup>
import { useRouter } from 'vue-router'

// 获取路由实例
const router = useRouter()

// 点击事件处理函数
const goToTargetPage = () => {
  // 基础路径跳转
  router.push('/your-target-path')
  // 带参数的跳转写法
  // router.push({ path: '/user', query: { id: 123 } })
}
</script>

<template>
  <!-- 绑定点击事件到元素 -->
  <div @click="goToTargetPage">点击跳转至目标页面</div>
</template>

2. 选项式API #

如果你的组件用传统选项式写法，只要项目路由配置正常，直接通过this.$router即可访问实例：

<script>
export default {
  methods: {
    goToTargetPage() {
      this.$router.push('/your-target-path')
    }
  }
}
</script>

<template>
  <div @click="goToTargetPage">点击跳转至目标页面</div>
</template>

若this.$router不存在，检查组件是否处于<router-view>的渲染范围内——只有路由管理的组件才会自动注入$router。

非组件场景（如工具函数） #

如果需要在普通JS文件中使用路由，可直接导出并导入已创建的路由实例：
在src/router/index.js中导出router：

import { createRouter, createWebHistory } from 'vue-router'
const routes = [/* 你的路由配置列表 */]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

在需要的文件中导入使用：

import router from '@/router'

router.push('/your-target-path')

注意事项 #

确保Quasar项目已正确启用路由插件：创建项目时选择了路由选项，或手动在quasar.conf.js的framework.plugins中添加'router'。

内容的提问来源于stack exchange，提问作者SARogersz