router-view does not render routes & components

Question

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.

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 .

Please checkout my source code let me know where & how i'm getting it wrong.

Here's the routes/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 =>

@extends('layouts.app')

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

In case you need the 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 =>

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

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

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.

Check out the GitHub issue

So here's my modified 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.

router-view does not render routes & components

Question

1 answers

solution1
1 ACCPTED 2019-12-15 19:45:20

router-view does not render routes & components

Question

1 answers

solution1 1 ACCPTED 2019-12-15 19:45:20

solution1
1 ACCPTED 2019-12-15 19:45:20