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

【问题标题】：Vue2 / vue-router / Laravel - router-view not showing a Vue ComponentVue2 / vue-router / Laravel - 路由器视图未显示 Vue 组件
【发布时间】：2021-12-29 07:40:18
【问题描述】：

我遇到了一个问题，我的 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) 会引发错误，所以这也不起作用。 ---

【问题讨论】：

标签： laravel vue.js vuejs2 vue-component vue-router

【解决方案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
})

【讨论】：

感谢您的意见！我刚试过这个。它所做的只是让我回到欢迎页面。 “myFirstVuePage.vue”仍然没有显示:(
@user3706091 如果你使用/#/my-new-vue-route url，它会显示吗？如果是这样，那么它似乎是历史模式的问题
它让我回到包含“mainapp”vue 的欢迎页面视图。这是我的网络路由文件中唯一的东西，我相信这是告诉 laravel vue 正在处理路由的代码，还是我错了？：Route::any('{any}', function(){ return view ('欢迎'); })->where('any', '.*');