Я использую vue js для front-end, все работало правильно, пока я не начал использовать маршрутизатор, каждый раз, когда я использую router-view компонент, где исчезает тег router-view, я пытался использовать маршрутизатор вмой компонент называется «Slider», который вызывается из «App», вот ошибка, которую я получаю в консоли:
app.js:73366 [Vue warn]: Error in render: "TypeError: Cannot read property 'matched' of undefined"
found in
---> <Slider> at resources/js/components/main/Slider.vue
<App> at resources/js/views/App.vue
<Root>
warn @ app.js:73366
app.js:74629 TypeError: Cannot read property 'matched' of undefined
at render (app.js:69929)
at createFunctionalComponent (app.js:75797)
at createComponent (app.js:75970)
at _createElement (app.js:76154)
at createElement (app.js:76092)
at vm._c (app.js:76223)
at Proxy.render (app.js:69484)
at VueComponent.Vue._render (app.js:76277)
at VueComponent.updateComponent (app.js:76793)
at Watcher.get (app.js:77204)
Вот app.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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>page</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
<div id="app">
<app></app>
</div>
</body>
</html>
App.vue
<template>
<div class="landing-page">
<disclaimer></disclaimer>
<navigation></navigation>
<slider></slider>
<landing></landing>
<footeralt></footeralt>
</div>
</template>
Slider.vue
<template>
<div class="container">
<b-col cols="4" md="4" sm="3" class="float-right">
<h4 align="left">Quick links</h4>
<b-list-group style="background-color:transparent" class="text-light">
<b-list-group-item align="left" :to="{name: 'example'}"><strong>></strong> FAQ</b-list-group-item>
<b-list-group-item align="left"><strong>></strong> Services</b-list-group-item>
</b-list-group>
<router-view></router-view>
</b-col>
</div>
</div>
</template>
app.js
require('./bootstrap');
import Vue from 'vue'
import VueRouter from 'vue-router'
import BootstrapVue from 'bootstrap-vue'
import routes from './routes';
Vue.use(BootstrapVue);
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.config.productionTip = false
window.Vue = require('vue');
/* Main page coponents */
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('navigation', require('./components/main/Navigation.vue').default);
Vue.component('disclaimer', require('./components/main/Disclaimer.vue').default);
Vue.component('slider', require('./components/main/Slider.vue').default);
Vue.component('landing', require('./components/main/Landing.vue').default);
Vue.component('footeralt', require('./components/main/Footer.vue').default);
Vue.component('app', require('./views/App.vue').default);
/* Router */
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes
});
const app = new Vue({
el: '#app',
routes
});
rout.js
import Example from './components/ExampleComponent.vue';
export const routes = [{
path: '/example',
component: Example,
name: 'example'
}];
web.php (маршруты Laravel)
Route::get('/{any}', 'mainpage\LandingController@index')->where('any', '.*');
LandingController
class LandingController extends Controller
{
public function index(){
return view ('app');
}
}