welcome.blade.php

Question

我正在尝试使用Vuejs和Laravel创建SPA。我已经安装了vue-router来完成该任务。必须在

内部呈现的组件

<router-view />

标记未呈现。

我尝试创建一个新项目，然后再次安装npm和vue-router。仍然不起作用。

Laravel版本：5.8.18 vue-router：3.0.6

welcome.blade.php

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
    </head>
    <body>
        <div id = "app">
            <router-view></router-view>
        </div>

        <script src = "js/app.js"></script>
    </body>
</html>

app.js（./ resources / js / app.js）

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)

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

routes.js（./ resources / js / routes.js）

import Home from './components/Home'

export default {
    mode: 'history',
    routes: [
    {
        path: '/',
        component: Home
    }
   ]
 }

Home.vue（./ resources.components / Home.vue）

<template>
    <p>Home</p>
</template>

<script>
    export default {}
</script>

web.php

<?php

Route::get('/{any?}', function () {
    return view('welcome');
});

Answer 1

您的代码对我有用。记住要使用

npm run watch

组件无法使用Vuejs通过Laravel 5.8中的<router-view>进行渲染

welcome.blade.php

app.js（./ resources / js / app.js）

routes.js（./ resources / js / routes.js）

Home.vue（./ resources.components / Home.vue）

web.php

1 个答案: