Fatal编程技术网
  • laravel/
  • Laravel 组件未使用VueRouter加载

Laravel 组件未使用VueRouter加载

laravel vue.js

Laravel 组件未使用VueRouter加载,laravel,vue.js,vue-router,Laravel,Vue.js,Vue Router,我一直在尝试使用VueRouter和Laravel来设置一个简单的vue应用程序。但是vue路由器没有正确加载组件 欢迎使用.blade.php <body> <div id="app"> <main-app/> </div> <script src="{{ asset('js/app.js') }}"></script> </body> routes.js import Home from

我一直在尝试使用VueRouter和Laravel来设置一个简单的vue应用程序。但是vue路由器没有正确加载组件

欢迎使用.blade.php

<body>
  <div id="app">
     <main-app/>
  </div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
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中显示）。但是，什么也没有表现出来

我是Vue新手，请帮助找到解决方案。

您的routes.js应该是-

import Home from './components/Home.vue'
export const routes = [{
    path: '/vue-spa',
    component: Home,
    name: 'Home'
}];
此外，请确保完成以下操作：

  • 您已经在项目中执行了
    npm install
    命令。这将安装编译js文件所需的
    laravel mix
    包。（）
  • 安装laravel mix后，配置根文件夹中的webpack.mix.js文件。在您的情况下（假设您编写js代码的app.js文件存在于参考资料/js中），webpack.mix.js应该如下所示-

    const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js');
这将在public/js/app.js中生成已编译的resources/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', '.*');

    不要执行
    window.Vue=require（'Vue'）
    ，请执行
    window.Vue=Vue
    ；如果有变化，请告诉我anything@MatthiasS不，输出是相同的。也许您应该将
    window.Vue=require（'Vue'）
    放在顶部，然后从“Vue”部分删除
    import Vue。我不确定它是否会改变一些事情，但我不喜欢通过不同的方法在同一个文件中导入两次vue。您能否转到
    MainApp.vue
    并将其添加到创建的
    钩子中：
    console.log（this.$router，this.$route）
    它没有打印到控制台。它没有加载主组件。但我不明白为什么它没有加载，但如果它没有打印任何内容，这意味着它甚至没有加载MainApp.vue。所以这甚至可能不是路由器的问题。嘿，维丹特，谢谢你的回复。在发布这个问题之前，我已经完成了上面提到的所有步骤，关于
    routes.js
    文件的另一件事是：
    vue spa
    是应用程序，因此，我认为将路径设置为
    /
    是合适的。如果我错了，请纠正我。如果是这种情况，您只需尝试运行
    localhost:8000
    或
    localhost:8080
    。需要在路由中显式定义应用程序名称。只是您打开的url路径应该与vue路由中的某个路径匹配。例如，如果您正在打开
    localhost:8000/foo/bar
    ，您的vue路由器必须定义路径
    /foo/bar
    。另外，请检查我是否已在回答中更新了Laravel的路线。抱歉，我之前发错了路线。嘿，谢谢你详细的回答。主页组件在routes和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', '.*');