0

我正在尝试在 vuejs3 上使用 vue-router 制作一个简单的路由器，并且在第一次点击链接时收到此警告（而不是其他点击）：

vue@next:1571 [Vue 警告]：组件缺少模板或渲染功能。

我在 ubuntu 上使用 vuejs3、vue-router、vscode、chrome

我的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>Warn - Vue 3 / Router</title>
    </head>
    <body>
        <div id="app">
            <router-link to="/">Home</router-link>
            <br />
            <router-link to="/contact">Contact</router-link>
            <router-view></router-view>
        </div>

        <script src="https://unpkg.com/vue@next"></script>
        <script src="https://unpkg.com/vue-router@4.0.5/dist/vue-router.global.js"></script>
        <script>
            // App
            const app = Vue.createApp({});

            // Component
            const Home = app.component("home", {
                template: `<h1>Home</h1>`,
                name: "Home",
            });

            const Contact = app.component("contact", {
                template: `<h1>Contact</h1>`,
                name: "Contact",
            });

            // Router
            const router = VueRouter.createRouter({
                history: VueRouter.createWebHistory(),
                routes: [
                    { path: "/", component: Home },
                    { path: "/contact", component: Contact },
                ],
            });
            app.use(router);

            app.mount("#app");
        </script>
    </body>
</html>

您能否更正或给我一个在 vuejs3 上实现 vue-router 的链接（我是 vuejs 的初学者）？谢谢

4

2 回答 2

2

有两个问题：

  1. 组件注册不正确
app.component("home", {
    template: `<h1>Home</h1>`,
    name: "Home",
});
const Home = app.component("home");

见：https ://v3.vuejs.org/api/application-api.html#component

  1. 如果在 HTML 文件中使用 Vue Router，只使用 Hash Mode
- history: VueRouter.createWebHistory(),
+ history: VueRouter.createWebHashHistory(),

完整代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>Warn - Vue 3 / Router</title>
    </head>
    <body>
        <div id="app">
            <router-link to="/">Home</router-link>
            <br />
            <router-link to="/contact">Contact</router-link>
            <router-view></router-view>
        </div>

        <script src="https://unpkg.com/vue@next"></script>
        <script src="https://unpkg.com/vue-router@4.0.5/dist/vue-router.global.js"></script>
        <script>
            // App
            const app = Vue.createApp({});

            // Component
            app.component("home", {
                template: `<h1>Home</h1>`,
                name: "Home",
            });
            const Home = app.component("home");

            app.component("contact", {
                template: `<h1>Contact</h1>`,
                name: "Contact",
            });
            const Contact = app.component('contact')

            // Router
            const router = VueRouter.createRouter({
                history: VueRouter.createWebHashHistory(),
                routes: [
                    { path: "/", component: Home },
                    { path: "/contact", component: Contact },
                ],
            });
            app.use(router);

            app.mount("#app");
        </script>
    </body>
</html>
于 2022-01-28T10:00:49.170 回答
0

请进一步详细说明，上传错误的屏幕截图，您的代码对我来说看起来不错。

于 2022-01-28T04:28:15.127 回答