[英]router-view does not render routes & components
I want to render components in my blade templates using the <router-view></router-view>
component of VueRouter but it seems i'm getting it wrong somehow.我想使用 VueRouter 的
<router-view></router-view>
组件在我的刀片模板中呈现组件,但似乎我不知何故弄错了。
I included the <router-view>
tag in the index.blade.php file and my routes at routes/web.php & routes/index.js hit the same endpoints which is /courses
.我在 index.blade.php 文件中包含了
<router-view>
标签,我在 routes/web.php 和 routes/index.js 中的路由命中了相同的端点,即/courses
。
Please checkout my source code let me know where & how i'm getting it wrong.请查看我的源代码,让我知道我在哪里以及如何出错。
Here's the routes/web.php =>这是路由/web.php =>
// I decided to use this for testing the route
Route::get('/courses/{vue_capture?}', function () {
return view('courses.index');
})->where('vue_capture', '[\/\w\.-]*');
and my courses/index.blade.php goes like =>我的课程/index.blade.php 就像 =>
@extends('layouts.app')
@section('content')
<router-view></router-view>
@endsection
In case you need the layouts/app.blade.php =>如果您需要 layouts/app.blade.php =>
<!--Everyother thing-->
<body>
<div id="wrapper">
<!--These are components i created-->
<mobile-header></mobile-header>
<search></search>
<mobile-search></mobile-search>
<side-nav></side-nav>
@yield('content')
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
<!--Everyother thing-->
and here's my app.js =>这是我的 app.js =>
window.Vue = require("vue");
import VueRouter from "vue-router";
Vue.use(VueRouter);
Vue.config.productionTip = false;
window.Event = new Vue();
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
const files = require.context("./", true, /\.vue$/i);
files.keys().map(key =>
Vue.component(
key
.split("/")
.pop()
.split(".")[0],
files(key).default
)
);
import routes from "./routes";
import store from "./store";
const router = new VueRouter({
mode: "history",
routes: routes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition; // Return a saved position if one's available
} else if (to.hash) {
return { selector: to.hash }; // Return a hash if set
} else {
return { x: 0, y: 0 }; // Return to the top
}
}
});
const app = new Vue({
router,
store
}).$mount("#wrapper");
and here is route/index.js =>这是 route/index.js =>
let index = require("../components/courses/index.vue").default;
let show = require("../components/courses/show.vue").default;
const routes = [
{
path: "/",
name: "welcome",
component: null
},
{
path: "/courses",
name: "courses.index",
component: index
},
{
path: "/course/show",
name: "courses.show",
component: show
}
];
export default routes;
Resolved this after hours of debugging;经过数小时的调试解决了这个问题; a github issue about rendering parent route definition without any component and having the matched children rendered in the root
<router-view>
tag.关于在没有任何组件的情况下渲染父路由定义并将匹配的子级渲染在根
<router-view>
标记中的 github 问题。
Check out the GitHub issue查看GitHub 问题
So here's my modified routes/index.js所以这是我修改后的 routes/index.js
const routes = [
{
path: "/",
component: {
render(c) {
return c("router-view");
}
},
meta: {
guest: true
},
children: [
{
path: "courses",
component: index,
name: "courses.index",
meta: {
title: `Courses - ${AppName}`,
metaTags: [
{
name: "description",
content: "All Courses."
}
]
}
},
{
path: `courses/show/single`,
component: show,
name: "courses.show",
meta: {
title: `Course Detail`
}
}
]
}
];
Hope this helps someone.希望这可以帮助某人。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.