router-view 不渲染路由和组件答案

【问题标题】：router-view does not render routes & componentsrouter-view 不渲染路由和组件
【发布时间】：2020-04-07 22:17:12
【问题描述】：

我想使用 VueRouter 的 <router-view></router-view> 组件在我的刀片模板中渲染组件，但似乎我弄错了。

我在 index.blade.php 文件中包含了 <router-view> 标记，并且我在 routes/web.php 和 routes/index.js 上的路由到达了相同的端点，即 /courses。

请查看我的源代码，让我知道我在哪里以及如何弄错了。

这里是路由/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\.-]*');

我的课程/index.blade.php 就像 =>

@extends('layouts.app')

@section('content')
    <router-view></router-view>
@endsection

如果你需要 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-->

这是我的 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");

这里是 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;

【问题讨论】：

标签： php laravel vue.js vuejs2 vue-router

【解决方案1】：

经过数小时的调试解决了这个问题；一个关于在没有任何组件的情况下渲染父路由定义并将匹配的子路由渲染在根 <router-view> 标签中的 github 问题。

查看GitHub issue

这是我修改后的 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`
                }
            }
        ]
    }
];

希望这对某人有所帮助。

【讨论】：