Vue 路由器未在 Laravel 应用程序中加载页面

Question

我正在尝试加载 vue 路由器页面。不知道出了什么问题。这是我所做的。

在router.js 文件中我有

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import testPage from './test.vue';
 
const defaultRoutes = [
    {path: '/test', component: testPage}
 ]
 
 export default new Router({
    mode: 'history',
    defaultRoutes
  })

在app.js 文件中我有

require('./bootstrap');
window.Vue = require('vue');
Vue.component('mainapp', require('./mainapp.vue').default);
import router from './router'
const app = new Vue({
    el: '#app',
    router
});

在mainapp.vue 我有的文件中

<template>
<div>
    <h1>this is the main app !</h1>
     <router-view></router-view>
</div>
</template>

在test.vue我有

<template>
<div>
    <h1>this is the test page</h1>
</div>
</template>

当我点击 /test url 时，我可以看到 h1 文本已加载，但 testPage 组件未加载。

有人可以帮忙吗？谢谢。

Answer 1

将defaultRoutes的名称更改为routes。