Question

我想使用VueRouter的hash()组件在刀片模板中渲染组件，但似乎我以某种方式弄错了。

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

请签出我的源代码，让我知道我在哪里以及怎么弄错了。

这是路由/web.php =>

/courses

和我的course / index.blade.php就像=>

// I decided to use this for testing the route
Route::get('/courses/{vue_capture?}', function () {
    return view('courses.index');
})->where('vue_capture', '[\/\w\.-]*');

如果您需要layouts / app.blade.php =>

@extends('layouts.app')

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

这是我的app.js =>

<!--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-->

这是route / index.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");

Answer 1

在调试数小时后解决了此问题；一个有关在没有任何组件的情况下呈现父路由定义并在根<router-view>标记中呈现匹配子元素的github问题。检出@ Empty parent in nested child

所以这是我修改后的route / 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 个答案: