Question

我一直在尝试使用带有Laravel的VueRouter设置一个简单的vue应用程序。但是vue-router无法正确加载组件。

welcome.blade.php

<body>
  <div id="app">
     <main-app/>
  </div>
<script src="{{ asset('js/app.js') }}"></script>
</body>

app.js

//import Vue from 'vue';
window.Vue = require('vue');
import VueRouter from 'vue-router';
import {
    routes
} from './routes';
import MainApp from './components/MainApp.vue';

Vue.use(VueRouter);
const router = new VueRouter({
    routes,
    mode: 'history'
});

const app = new Vue({
    el: '#app',
    router,
    components: {
        MainApp
    }
});

routes.js

import Home from './components/Home.vue'
export const routes = [{
    path: '/',
    component: Home,
    name: 'Home'
}];

MainApp.vue

<template>
  <div id="main">
    <router-view></router-view>
  </div>
</template>

如果拨打http://localhost:8080/vue-spa，则应显示“主页组件”（我们正在Home.vue中显示）。但是，什么都没有显示。

Screenshot of Dev Tools

我是Vue的新手，可以帮助您找到解决方案。

Answer 1

您的route.js应该是-

import Home from './components/Home.vue'
export const routes = [{
    path: '/vue-spa',
    component: Home,
    name: 'Home'
}];

此外，请确保已完成以下操作-

您已经在项目中执行了npm install命令。这将安装laravel-mix软件包，这是编译js文件所必需的。（Learn more）
然后，一旦您安装了laravel-mix，就配置根文件夹中的webpack.mix.js文件。在您的情况下（假设您在其中编写了js代码的app.js文件存在于resources / js中），webpack.mix.js应该类似于-
```
const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js');
```

这将在public / js / app.js中产生已编译的resourses / js / app.js文件

完成后，执行npm run watch。每当您对resources / js / app.js代码或其导入的文件进行任何更改时，这将重新编译public / js / app.js文件。

另一个非常重要的步骤是设置Laravel的路由，以便服务器收到的任何请求都为您的vue.js SPA提供入口。这是您获取404页面的可能原因。在web.php中定义以下路由以启用该路由-

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::view('/{any}', 'welcome')->where('any', '.*');

组件未随VueRouter一起加载

1 个答案: