[英]Vue js + Laravel 6, router-view not rendering component
I'm using vue js for front-end, everything was working properly until I started using the router, everytime I use the router-view the component where the router-view tag is disappears, I tried to use the router in my component called "Slider" which is called from "App", here's the error I get in the console:我在前端使用vue js,一切正常,直到我开始使用路由器,每次我使用路由器视图时,路由器视图标签消失的组件,我尝试在我的组件中使用路由器称为从“App”调用的“Slider”,这是我在控制台中遇到的错误:
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)
Here's the app.blade.php这是 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应用程序.vue
<template>
<div class="landing-page">
<disclaimer></disclaimer>
<navigation></navigation>
<slider></slider>
<landing></landing>
<footeralt></footeralt>
</div>
</template>
Slider.vue 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应用程序.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
});
routes.js路由.js
import Example from './components/ExampleComponent.vue';
export const routes = [{
path: '/example',
component: Example,
name: 'example'
}];
web.php (Laravel routes) web.php (Laravel 路线)
Route::get('/{any}', 'mainpage\LandingController@index')->where('any', '.*');
LandingController着陆控制器
class LandingController extends Controller
{
public function index(){
return view ('app');
}
}
In your app.js file.在您的app.js文件中。
// import the App.vue file
import App from "./App.vue";
// import routes this way
import { routes } from "./routes.js";
// rest of the code here
const app = new Vue({
el: '#app',
router, // replace routes with router
render: h => h(App), //indicate the App component inside render function
});
if the above does not work, then try如果上述方法不起作用,请尝试
// import the App.vue file
import App from "./App.vue";
// import routes this way
import { routes } from "./routes.js";
// rest of the code here
const app = new Vue({
router, // replace routes with router
render: h => h(App), //indicate the App component inside render function
}).$mount("#app");
the #app
here is the id
of the div
in your index.html
file #app
这里是你index.html
文件中div
的id
the Vue
constructor expects router
object, not routes
array Vue
构造函数需要router
object,而不是routes
数组
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.