Как использовать VueRouter в расширении Chrome

Я делаю расширение для Chrome с помощью Vue 3 + VueRouter.

С помощью функции router.push я пытался изменить содержимое представления маршрутизатора на другой компонент, то есть показывать пользователям другой пользовательский интерфейс.

Однако, какие бы методы я ни использовал, я просто не могу изменить представление.

Итак, у моего App.vue есть Router-View, и у меня есть два компонента, которые я хотел бы показать по одному.

Первый компонент — «О нас», а второй — «Дом».

Что я сделал, так это создал метод, который срабатывает при событии onClick.

Итак, первое представление — Home (пользователи сначала видят это представление). Затем, когда пользователь нажимает кнопку, он меняет компонент пользовательского интерфейса, показывая страницу «О странице». Я использовал router.push('/about') для замены компонента пользовательского интерфейса на About.vue. Это было неудачно.

Я знаю о том факте, что расширения Chrome на самом деле не являются веб-страницей, поэтому маршрутизация отличается, но, похоже, ничего не работает.

Я проверил эту ссылку и попробовал, и, к сожалению, это было бесполезно

Как отобразить вид маршрутизатора с помощью VUEJS3 в проекте сборки для расширения Google Chrome

router.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;

main.js

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 (когда я использовал router-view)

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

Если я делаю такой вид маршрутизатора в расширении Chrome, ничего не отображается

Поэтому я сделал это также, чтобы изменить представление с помощью router-link. Это не сработало. Нажав на тег 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. Это было неудачно