在带有 Quasar 框架 (v2) 的纯 .js 文件中使用 vue router (v4)

Question

我正在尝试从 Quasar 项目中的普通 .js 文件访问路由器，但我无法做到。我搜索了如何在 vue 中执行此操作，人们似乎Router从 导入对象/src/router/index，如下所示：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;
});

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

Answer 1

理想情况下，您不需要在 Vue 组件之外、启动文件之外、 Outside src/router/index.js、 Outsidesrc/store/index.js以及定义在 Vue 文件中调用的函数的位置（例如 composables/helpers）之外的地方使用路由器。以下是访问路由器（SFC 内部和外部）的所有方法：

内部.vue文件：

• 组合 API（在 setup() 或 内<script 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('...');