Vue3 + VueRouter in Chrome Extension

Hi, I am trying to make a chrome extension with Vue3 VueRouter.

However, I can’t seem to change component view by using vuerouter

like I’ve tried everything, router.push, router-link to="", router-view. router-view does not display anything on the chrome extension popup, which is my index.html.


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

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

const router = createRouter({
  history: createWebHashHistory(),
  routes,
  mode: "abstract",
});

export default router;

here is my router.js. I heard chrome extension is not like a web app so can’t really use url path then how can I change UI, showing a different component at a time?

Have you tried using memory history?

https://router.vuejs.org/guide/essentials/history-mode.html#memory-mode

I’ve tried that one as well. Nothing happened :frowning: