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

Posted 2023-02-23

【中文标题】Vue 路由器未在 Laravel 应用程序中加载页面

【英文标题】：Vue router is not loading the page in Laravel app

【发布时间】：2020-12-23 21:00:17

【问题描述】：

我正在尝试加载 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 组件未加载。

有人可以帮忙吗？谢谢。

【问题讨论】：

控制台是否出现错误？

没什么。一切都很干净，包括终端（运行 npm run watch）

你在用 laravel 吗？

是的，我已经安装了一个新的 laravel

尝试将defaultRoutes的名称更改为routes。

【参考方案1】：

将defaultRoutes的名称更改为routes。