vue.js - 未在 SFC 中定义的组件不使用 Vue3 Router 显示?
问题描述
现在我正在尝试使用 Vue3 创建网站的前端。但是现在我在使用路由器时遇到了问题。这是我的代码。
主.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
路由器/index.js
import {createRouter, createWebHistory} from 'vue-router'
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
]
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
应用程序.vue
<template>
<img alt="Vue logo" src="./assets/logo.png">
<h1>Hello App!</h1>
<p>
<!-- use the router-link component for navigation. -->
<!-- specify the link by passing the `to` prop. -->
<!-- `<router-link>` will render an `<a>` tag with the correct `href` attribute -->
<router-link to="/">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
</p>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view></router-view>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
渲染后路由器视图中没有内容。我该如何解决?
解决方案
我在这里尝试了您的示例,并且得到了与您相同的行为,但是在单个文件中定义组件后,它们可以正常工作:
import Contact from "./Contact.vue";
import About from "./About.vue";
const Home = { name: "Home", template: "<div>Home</div>" };// this will not be displayed
const routes = [
{ path: "/", name: "Home", component: Home },
{ path: "/contact", name: "Contact", component: Contact },
{ path: "/about", component: About }
];
推荐阅读
- powershell - Azure 管道:基于 OS 的条件环境变量
- android - 如何在屏幕触摸和按住上进行 Activity 更改,并在释放相同的保持时再次更改?
- java - 根据文件中的多个模式从文件中提取字符串
- android - 在错误的包中生成的数据绑定
- firebase - 动态链接和托管不同意自定义域是否正确连接
- java - 如果字符串包含 000,则 OffsetDateTime 不显示毫秒
- python - 如何将多阵列数据提供给模型?
- reactjs - react-script 导致 TypeScript 尝试查找要导入的错误文件
- c# - Azure:.NET Framework(首先使用 EF 代码)和 Microsoft SQL Server 某些查询的 CPU 突然峰值
- javascript - 带有扩展名和文件大小的 JavaScript 文件类型