使用带vuejs3的Vue -路由器，我得到这个Vue警告:组件缺少模板或呈现函数。
使用带vuejs3的Vue -路由器，我得到这个Vue警告:组件缺少模板或呈现函数。
提问于 2022-01-28 04:15:31
我试图使用vuejs3上的vue-路由器制作一个简单的路由器，并且在第一次单击链接(而不是其他的单击)时收到这个警告：
vue@next:1571 Vue警告:组件缺少模板或呈现函数。
我使用vuejs3，vue-路由器，vscode，chrome on ubuntu。
我的代码：
<!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路由器的链接(我是vuejs的初学者)吗？谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-01-28 10:00:49
有两个问题：
- 组件注册错误
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路由器，则只使用Hash模式
- 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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70888743
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号