I have been working on a Chrome extension using Vue 3 + VueRouter.
One issue I encountered was trying to change the router-view content to display a different component, essentially showing users a different UI.
Despite my efforts and various methods used, I couldn't get the view to switch.
In my App.vue file, I have a router-view set up with two components that I want to alternate between - About and Home.
The initial view is Home, but when a user clicks a button, I wanted to switch to the About Page. I attempted to use router.push('/about') to achieve this, but it didn't work.
I understand that Chrome extensions don't behave like regular web pages in terms of routing, making it tricky to implement changes.
I referenced a solution on Stack Overflow and tried implementing it, but unfortunately, it didn't solve the issue.
Here is the Stack Overflow post I referred to
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 (when using router-view)
<template>
<router-view />
</template>
When I had router-view in App.vue on the Chrome extension, nothing displayed.
To attempt changing the view, I also tried using router-link, which also didn't work. Upon clicking the router-link tag, nothing happened.
<template>
<Login />
<router-link to="/about"> About </router-link>
</template>
methods: {
routerPush() {
this.$router.push("about");
this.$router.push("/about"); // tried both with and without /
},
}
<template>
<Login />
<span @click="routerPush"> About </span>
</template>
I included the above code snippet to test out the router.push functionality, but unfortunately, it did not work as expected.