将 vue-router 与 vuejs3 一起使用，我收到此 Vue 警告：组件缺少模板或渲染函数

Question

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

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>

你能纠正或给我一个 link 在 vuejs3 上实现 vue-router 吗（我是 vuejs 的初学者）？谢谢

Answer 1

有两个问题：

组件注册不正确

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

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

如果你在 HTML 个文件中使用 Vue Router，只使用哈希模式

- 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>

将 vue-router 与 vuejs3 一起使用，我收到此 Vue 警告：组件缺少模板或渲染函数

Using vue-router with vuejs3 and I get this Vue warn: Component is missing template or render function

google-chrome

vue.js

vuejs3

vue-router4