Vue2 / vue-router / Laravel - 路由器视图未显示 Vue 组件
Posted
技术标签:
【中文标题】Vue2 / vue-router / Laravel - 路由器视图未显示 Vue 组件【英文标题】：Vue2 / vue-router / Laravel - router-view not showing a Vue Component 【发布时间】：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) 会引发错误，所以这也不起作用。 ---
【问题讨论】：
【参考方案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', '.*');以上是关于Vue2 / vue-router / Laravel - 路由器视图未显示 Vue 组件的主要内容，如果未能解决你的问题，请参考以下文章