如何在Chrome扩展中使用VueRouter？路由切换失效求助

核心问题分析 #

你的路由配置存在两处关键错误，导致路由切换失效：

1. 错误地将根组件App.vue注册为路由组件，而App.vue是整个应用的挂载入口，应该用来承载<router-view>，而非作为路由页面。
2. 缺少Home组件的路由配置，且createWebHashHistory的base路径设置不符合Chrome扩展的URL规则。

修正后的代码实现 #

1. router.js 修正

import { createRouter, createWebHashHistory } from "vue-router";

const routes = [
  // 根路径对应Home组件（替换为你实际的首页/Login组件路径）
  {
    path: "/",
    component: () => import("../src/views/Home.vue"),
    name: "Home",
  },
  {
    path: "/about",
    component: () => import("../src/views/About.vue"),
    name: "About",
  },
];

// Chrome扩展入口为index.html，base设为空字符串即可匹配hash路径
const router = createRouter({
  history: createWebHashHistory(""),
  routes,
});

export default router;

2. App.vue 修正

确保根组件保留<router-view>作为路由页面的渲染容器，可添加全局导航链接：

<template>
  <div class="nav">
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
  </div>
  <!-- 路由匹配的组件会在这里渲染 -->
  <router-view />
</template>

3. 手动跳转的正确写法

如果用按钮点击触发跳转，选项式API写法：

<template>
  <span @click="goToAbout">跳转到关于页</span>
</template>

<script>
export default {
  methods: {
    goToAbout() {
      this.$router.push('/about');
    }
  }
}
</script>

组合式API写法：

<template>
  <span @click="goToAbout">跳转到关于页</span>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();

const goToAbout = () => {
  router.push('/about');
};
</script>

Chrome扩展路由额外注意事项 #

• 只能使用createWebHashHistory，Chrome扩展不支持HTML5 History模式（无法修改扩展页面的URL路径）。
• 确保manifest.json中配置的入口页面（如popup.html、options.html）正确引入打包后的JS文件，且页面存在<div id="app"></div>作为挂载点。
• 若为popup页面，注意调整窗口尺寸，避免路由切换后内容被遮挡。

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