路由器視圖不渲染路由和組件

Question

我想使用 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;

Answer 1

經過數小時的調試解決了這個問題； 關於在沒有任何組件的情況下渲染父路由定義並將匹配的子級渲染在根<router-view>標記中的 github 問題。

查看GitHub 問題

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

希望這可以幫助某人。

路由器視圖不渲染路由和組件

問題描述

1 個解決方案

解決方案1
1 已采納 2019-12-15 19:45:20

路由器視圖不渲染路由和組件

問題描述

1 個解決方案

解決方案1 1 已采納 2019-12-15 19:45:20

解決方案1
1 已采納 2019-12-15 19:45:20