Vue2 / vue-router / Laravel - 路由器视图不显示 Vue 组件

Question

我运行遇到一个问题，我的 Vue 组件没有通过路由器视图显示，控制台中没有 Vue 警告或错误。

这是 git：https://github.com/woottonn/fullstack

这是我的代码：

web.php

<?php

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

welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Full Stack Blog</title>
    </head>
    <body class="antialiased">
        <div id="app">
            <mainapp></mainapp>
        </div>
    <script src="{{mix('/js/app.js')}}"></script>
    </body>
</html>

app.js

require('./bootstrap');
import Vue from 'vue'
import router from './router'

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

router.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

import myFirstVuePage from './components/pages/myFirstVuePage'

const routes = [
    {
        path: '/my-new-vue-route',
        component: myFirstVuePage
    }
];

export default new Router({
    mode: 'history',
    routes
})

mainapp.vue

<template>
    <div>
        <h1>VUE Componenty</h1>
        <router-view></router-view>
    </div>
</template>

myFirstVuePage.vue

<template>
    <div>
        <h1>This is my first page...</h1>
    </div>
</template>

我是不是漏掉了什么明显的东西？

--- 编辑：直接转到 URL (/my-new-vue-route) 会引发错误，因此这也不起作用。 ---

Answer 1

在routes/web.php中添加：

Route::get('/{vue_capture?}', function () {
    return view('welcome');
})->where('vue_capture', '[\/\w\.-]*');

这有助于 Laravel 捕获 Vue 生成的 URL，并且是设置历史记录模式时的路由解决方案，正如您所见。

export default new Router({
    mode: 'history',
    routes
})

Vue2 / vue-router / Laravel - 路由器视图不显示 Vue 组件

Vue2 / vue-router / Laravel - router-view not showing a Vue Component

laravel

vue.js

vue-router

vue-component

vuejs2