如何在 Chrome 扩展中使用 VueRouter

Question

我一直在使用 Vue 3 + VueRouter 进行 chrome 扩展。

使用 router.push 功能，我试图将路由器视图内容更改为不同的组件，这意味着向用户显示不同的 UI。

但是，无论我用什么方法，我就是无法改变视图。

所以我的 App.vue 有路由器视图，我有两个组件，我想一次显示一个。

组件一是关于，组件二是主页。

我所做的是创建了一个在 onClick 事件上触发的方法。

因此，第一个视图是主页（用户首先看到此视图）。 然后，当用户单击一个按钮时，它将交换 UI 组件，显示关于页面。 我使用 router.push('/about') 将 UI 组件交换到 About.vue。 它没有成功。

我知道 chrome 扩展并不是真正的 web 页面，因此路由不同但似乎没有任何效果。

我已经检查了这个参考并尝试过，遗憾的是它是徒劳的

如何在谷歌浏览器扩展的构建项目中使用 VUEJS3 显示路由器视图

路由器.js

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

const routes = [
  {
    path: "/index.html",
    component: () => import("../src/App.vue"),
    name: "App",
  },
  {
    path: "/about",
    component: () => import("../src/views/About.vue"),
    name: "About",
  },
];

const router = createRouter({
  history: createWebHashHistory("index.html"),
  routes,
});

export default router;

主程序

import { createApp } from "vue";
import App from "./App.vue";
import "./index.css";
import store from "./store/index";
import router from "./router";

const app = createApp(App);
app.use(store);
app.use(router);
app.mount("#app");

App.vue（当我使用路由器视图时）

<template>
  <router-view />
</template>

如果我在 Chrome 扩展程序上像那样执行路由器视图，则不会显示任何内容

所以我这样做也是为了通过使用路由器链接来改变视图。 它也没有用。 通过点击 router-link 标签，没有任何效果。

<template>
 <Login />
<router-link to="/about"> About </router-link>
</template>

methods: {
  routerPush() {
      this.$router.push("about");
      this.$router.push("/about"); tried both / and without /
    },
}

<template>
 <Login />
<span @click="routerPush"> About </span> 
</template>

上面的代码只是为了尝试 router.push 功能。 没有成功

Answer 1

我修好了它。 Vue 路由器不工作的原因是因为我没有要挂载的渲染器 Vue

您将需要一个组件 Renderer.vue 或模板中包含的任何组件，并将该组件安装在 main.js createApp(Renderer) 中，如下所示