我是 Vue js 的新手，我正在嘗試運行該應用程式，但它回傳空白頁并顯示錯誤：Component is missing template or render function. at <App>，它還顯示[Vue Router warn]: Record with path "/" is either missing a "component(s)" or "children" property.，Vue 的版本是 3
Vue 路由器.js
import VirtualMachine from "../views/virtualMachine.vue";
import HomePage from "../views/home.vue";
import CustomerProfile from "../views/CustomerProfile.vue";
import LoginPage from "../views/LoginPage.vue";
import RegistrationPage from "../views/RegistrationPage.vue";
import { createRouter, createWebHistory } from "vue-router";
/* eslint-disable no-unused-vars */
const routes = [
{
path: '/',
name: 'main_page',
component: HomePage,
},
{
path: '/login/',
name: 'login_page',
component: LoginPage,
},
{
path: '/register/',
name: 'register_page',
component: RegistrationPage,
},
{
path: '/virtual/machine/:VirtualMachineId',
name: 'virtual_machine',
component: VirtualMachine,
},
{
path: '/customer/profile/',
name: 'customer_profile',
component: CustomerProfile,
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export {router};
main.js
import { createApp } from 'vue';
import {App} from './App.vue';
import { router } from "../router/router.js";
/* eslint-disable no-unused-vars */
createApp(App).use(router).mount('#app')
應用程式.vue
<template>
<div v-if="virtualMachineLoaded">
<div v-if="!mobile" class="app flex flex-column">
<navigationPage />
<div class="app-content flex flex-column">
<modalPage v-if="modalActive" />
<transition name="virtualMachine">
<initializationModal v-if="initializationModal" />
</transition>
<router-view />
</div>
</div>
<div v-else class="mobile-message flex flex-column">
<h2>Sorry, this app is not supported on Mobile Devices</h2>
<p>To use this app, please use a Laptop or Another Device</p>
</div>
</div>
</template>
<script>
/* eslint-disable no-unused-vars */
import { mapState, mapActions } from "vuex";
import navigationPage from "./components/NavigationPage";
import initializationModal from "./components/InitializationModal";
import modalPage from "./components/ModalWindow";
export default {
name: "App",
data() {
return {
mobile: null,
};
},
components: {
navigationPage,
initializationModal,
modalPage,
},
created() {
this.GET_VIRTUAL_MACHINES();
this.checkScreen();
window.addEventListener("resize", this.checkScreen);
},
methods: {
...mapActions(["GET_VIRTUAL_MACHINES"]),
checkScreen() {
const windowWidth = window.innerWidth;
if (windowWidth <= 750) {
this.mobile = true;
return;
}
this.mobile = false;
},
},
computed: {
...mapState(["initializationModal", "modalActive", "VirtualMachinesLoaded"]),
},
};
</script>
我知道，我沒有提供所有帶有組件的檔案，但是如果您在那里看到一些錯誤或不匹配，請發表評論，
編輯：第二個錯誤不僅發生在主頁上，而且發生在所有路線上，（這可能是匯出的問題嗎？）
其中一個路由組件看起來像這樣，其他的則完全相似
<template>
<div class="HomePage container">
<router-link :to="{ name: 'Login'}"></router-link>
<router-link :to="{ name: 'Register'}"></router-link>
<router-view/>
<!-- Header -->
<div class="header flex">
<div class="left flex flex-column">
<h1>Virtual Machines</h1>
<span>You have {{ virtualMachineData.length }} total Virtual Machines</span>
</div>
<div class="right flex">
<div @click="toggleFilterMenu" class="filter flex">
<span
>Filter by status <span v-if="filteredVirtualMachine">: {{ filteredVirtualMachines }}</span></span
>
<img src="@/assets/icon-arrow-down.svg" alt="" />
<ul v-show="filterMenu" class="filter-menu">
<li @click="filteredVirtualMachine">Running</li>
<li @click="filteredVirtualMachine">Shutdown</li>
<li @click="filteredVirtualMachine">Deploying</li>
<li @click="filteredVirtualMachine">Clear</li>
</ul>
</div>
<div @click="newVirtualMachine" class="button flex">
<div class="inner-button flex">
<img src="@/assets/icon-plus.svg" alt="" />
</div>
<span>New VirtualMachine</span>
</div>
</div>
</div>
<!-- Virtual Machines -->
<div v-if="virtualMachineData.length > 0">
<Invoice v-for="(VirtualMachine, index) in filteredData" :VirtualMachine="VirtualMachine" :key="index" />
</div>
<div v-else class="empty flex flex-column">
<img src="@/assets/illustration-empty.svg" alt="" />
<h3>There is nothing here</h3>
<p>Create a new invoice by clicking the New Invoice button and get started</p>
</div>
</div>
</template>
<script>
/* eslint-disable no-unused-vars */
import { mapMutations, mapState } from "vuex";
export default {
name: "HomePage",
data() {
return {
filterMenu: null,
filteredVirtualMachine: null,
};
},
methods: {
...mapMutations(["TOGGLE_VIRTUAL_MACHINE"]),
newVirtualMachine() {
// Initializes Empty Form for the Virtual Machine Configuration
this.TOGGLE_VIRTUAL_MACHINE()
},
toggleFilterMenu() {
this.filterMenu = !this.filterMenu;
},
filterVirtualMachine(e) {
if (e.target.innerText === "Clear") {
this.filteredVirtualMachine = null;
return;
}
this.filteredVirtualMachine = e.target.innerText;
},
},
computed: {
...mapState(["virtualMachineData"]),
filteredData() {
return this.virtualMachineData.filter((virtualMachine) => {
if (this.filteredVirtualMachine === "Clear") {
this.filteredVirtualMachine = null
return true
}
if (this.filteredVirtualMachine === "Running") {
return virtualMachine.Running === true;
}
if (this.filteredVirtualMachine === "Shutdown") {
return virtualMachine.Shutdown === true;
}
if (this.filteredVirtualMachine === "Deploying") {
return virtualMachine.Deploying === true;
}
return virtualMachine;
});
},
},
}
</script>
uj5u.com熱心網友回復：
我認為您在路由器中匯入的組件可能不正確。您不應在匯入期間解構物件。
改變：
import {HomePage} from "../views/home.vue";
至：
import HomePage from "../views/home.vue";
uj5u.com熱心網友回復：
main.js您的檔案中的兩個問題是您匯入App了router大括號。請改用此語法：
import App from './App.vue';
import router from "../router/router.js";uj5u.com熱心網友回復：
錯誤在 main.js 檔案中。您需要像這樣從 './App.vue' 匯入 App：
import { App } from "./App.vue";
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/503786.html
標籤：javascript Vue.js