我一直在做一个铬扩展与Vue 3 + VueRouter.
使用router.push功能,我试图将router-view内容更改为不同的组件,这意味着向用户显示不同的UI。
然而,无论我用什么方法,我就是无法改变这种看法。
因此,我的App.vue有路由器视图,我有两个组件,我想一次显示一个。
组件一是“关于”,组件二是“主页”。
我所做的就是创建一个方法,在onClick事件上触发。
因此,第一个视图是Home(用户首先看到此视图)。然后,当用户单击按钮时,它将交换UI组件,显示About Page。我使用router.push('/about')将UI组件交换到About. vue。但没有成功。
我知道的事实是,铬扩展不是一个真正的网页,所以路由是不同的,但似乎没有什么工作。
我查过这个参考资料,试过了,可惜没用
How to display router view with VUEJS3 in a build project for google chrome extension
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(当我使用路由器视图时)
<template>
<router-view />
</template>
如果我在Chrome扩展程序上这样做路由器视图,什么都不显示
所以我这样做也是为了通过使用router-link来改变视图。它没有工作。通过点击router-link标签,什么都没有工作。
第一个
做了上面的代码只是为了尝试路由器。推送功能。它是不成功的
1条答案
按热度按时间9jyewag01#
我修复了它。Vue路由器不工作的原因是因为我没有一个渲染器Vue挂载
您将需要一个组件Renderer.vue或模板中包含的任何内容,并在main.jscreateApp(Renderer)中挂载该组件,如下所示