Quasar+TypeScript组件外调用Vue Router仅URL变页面不跳转

问题描述 #

在Quasar的TypeScript项目中，在组件外部使用Vue Router执行页面跳转时，仅URL发生变化，页面却没有实际跳转。

涉及代码 #

辅助函数代码 #

import route from '../router/index';

// 因TypeScript限制传入store
const router = route({
  store: pinia,
})

export function RoutePusher() {
    router.push({name: 'login'})
}

组件代码 #

<script lang="ts" setup>
import { RoutePusher } from 'src/helpers/file.ts';

function ComponentMethod() {
    RoutePusher();
}
</script>

路由配置代码 #

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,

    // 此处保持默认，修改请在quasar.conf.js中进行！
    // 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-view :key="route.fullPath"></router-view>，问题仍未解决。

解决方案 #

问题核心是：你调用route()时会新建一个Router实例，而组件内使用的是项目全局注册的Router实例，两者完全独立。所以辅助函数里的push只会修改URL，无法触发全局Router的页面跳转逻辑。

正确做法：复用全局Router实例 #

直接使用项目初始化好的全局Router实例，不要重新创建：

方式1：通过Quasar Boot文件导出全局Router

1. 创建src/boot/router.ts文件：

import { boot } from 'quasar/wrappers';
import { useRouter } from 'vue-router';

let routerInstance: ReturnType<typeof useRouter>;

export default boot(({ app }) => {
  routerInstance = useRouter();
});

export { routerInstance };

2. 在quasar.conf.js中注册这个boot文件（确保已添加到boot数组）：

boot: ['router'], // 若已有其他boot，追加即可

3. 修改辅助函数文件：

import { routerInstance } from 'src/boot/router';

export function RoutePusher() {
    routerInstance.push({name: 'login'});
}

方式2：直接导入路由文件中已创建的实例

如果你的router/index.ts最终导出的是已初始化的Router实例（而非创建函数），可以直接导入：

import router from '../router/index';

export function RoutePusher() {
    router.push({name: 'login'});
}

补充说明 #

<router-view :key="route.fullPath">仅用于解决同路由不同参数时的页面刷新问题，和当前实例不匹配的问题无关，所以对你的场景无效。

内容的提问来源于stack exchange，提问作者Александр Ястребов