[英]Vue2 / vue-router / Laravel - router-view not showing a Vue Component
我遇到了一个问题,我的 Vue 组件没有通过路由器视图显示,控制台中没有 Vue 警告或错误。
这是 git: https://github.com/woottonn/fullstack
这是我的代码:
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>
应用程序.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
});
路由器.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
})
主应用程序.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) 会引发错误,所以这也不起作用。 ---
在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
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.