在带有 Quasar 框架 (v2) 的普通 .js 文件中使用 vue 路由器 (v4)答案

【问题标题】：Use vue router (v4) in a plain .js file with Quasar framework (v2)在带有 Quasar 框架 (v2) 的普通 .js 文件中使用 vue 路由器 (v4)
【发布时间】：2022-11-07 06:56:37
【问题描述】：

我正在尝试从 Quasar 项目中的普通 .js 文件访问路由器，但我无法访问。我已经搜索了如何在 vue 中执行此操作，人们似乎从 /src/router/index 导入了 Router 对象，如下所示：import { Router } from 'src/router/index'。

但是 Quasar 并没有公开 Router 对象，而是一个名为 route 的函数，它接受另一个函数作为返回 Router 对象的参数。

export default route(function (/* { store, ssrContext } */) {
    const createHistory = process.env.SERVER
        ? createMemoryHistory
        : process.env.VUE_ROUTER_MODE === 'history'
        ? createWebHistory
        : createWebHashHistory;

    const Router = createRouter({
        scrollBehavior: () => ({ left: 0, top: 0 }),
        routes,

        // Leave this as is and make changes in quasar.conf.js instead!
        // quasar.conf.js -> build -> vueRouterMode
        // quasar.conf.js -> build -> publicPath
        history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE),
    });
    return Router;
});

如何在带有 Quasar 的 SFC 之外使用 Router 对象？

【问题讨论】：

标签： vue.js vue-router vuejs3 quasar-framework vue-router4

【解决方案1】：

理想情况下，您不需要在 Vue 组件之外、在引导文件之外、src/router/index.js 之外、src/store/index.js 之外以及定义在 Vue 文件中调用的函数的地方之外的路由器（例如可组合物/助手)。以下是访问 SFC 内部和外部路由器的所有方法：

在 .vue 文件中：

组合 API(在 setup() 或): const router = useRouter()
选项 API：this.$router
在<template> 部分内：@whatever="$router.push('...')"

内部引导文件：

// src/boot/whatever.js
export default boot(({ router }) => {
  router.beforeEach(...)
})

里面src/router/index.js(使用引导文件更好):

const router = createRouter(...)

router.beforeEach(...)

在 .vue 文件中使用的函数/可组合内：

// /src/composables/whatever.js
export function useWhatever() {
  const router = useRouter()

  // ...

  function changeRoute () {
    router.push('...')
  }

  return {
    changeRoute,
    // ...
  }
}

// Inside setup() or <script setup>
const { changeRoute } = useWhatever()
changeRoute()

作为最后的手段/懒惰的方式：(不适用于 SSR)

// src/router/index.js
// Remove export default function route(...), and use it like this:
const router = createRouter(...)
export default router;

// src/whatever.js
import router from 'src/router';

router.push('...');

【讨论】：