Vue.js SFC中未定义的组件未使用Vue3路由器显示?
现在,我正在尝试使用Vue3创建网站的前端。但是现在我在使用路由器时遇到了问题。 这是我的密码 Main.jsVue.js SFC中未定义的组件未使用Vue3路由器显示?,vue.js,vue-component,vue-router,vuejs3,vue-router4,Vue.js,Vue Component,Vue Router,Vuejs3,Vue Router4,现在,我正在尝试使用Vue3创建网站的前端。但是现在我在使用路由器时遇到了问题。 这是我的密码 Main.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 'vu
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路由器”导入{createRouter,createWebHistory}
常量Home={template:'Home'}
const About={template:'About'}
常数路由=[
{path:'/',组件:Home},
{路径:'/about',组件:about},
]
const router=createRouter({
历史记录:createWebHistory(),
路线
});
导出默认路由器;
App.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>
你好应用程序!
回家
着手
导出默认值{
名称:“应用程序”,
}
#应用程序{
字体系列:Avenir、Helvetica、Arial、无衬线字体;
-webkit字体平滑:抗锯齿;
-moz osx字体平滑:灰度;
文本对齐:居中;
颜色:#2c3e50;
边缘顶部:60像素;
}
渲染后路由器视图中没有内容。如何修复它?我尝试了您的示例,得到了与您相同的行为,但在单个文件中定义组件后,它们工作正常:
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 }
];
从“/Contact.vue”导入联系人;
从“/About.vue”导入关于;
const Home={name:“Home”,template:“Home”};//这将不会显示
常数路由=[
{路径:“/”,名称:“Home”,组件:Home},
{路径:“/contact”,名称:“contact”,组件:contact},
{路径:“/about”,组件:about}
];
在你的App.vue中
用div将所有内容包装起来
并添加id:'App'
我的意思是这里的所有内容
尝试从文件导入主页和关于视图,方法是从“../views/Home.vue”导入主页
,它也不起作用。请确保About.vue文件如下:About
与以前相同。