[Vuejs]-Router-link inside component is not showing content

by

0👍

✅

I already solved, creating one “father” component App.vue:

<template>
    <div id="app">
        <header-nav/>
        <div id="content">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>

import Header from "./header/Header"

export default {
  name: 'App',
  components: {
    "header-nav": Header
  }
}

</script>

welcome.blade.php body:

    <body>
       <div id="app">           
       </div>
       <script src="/js/app.js"></script>
    </body>

routes.js:

import Homepage from './components/homepage/Homepage';
import About from './components/About';
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

export default new VueRouter({
    mode: 'history',

    routes: [
        {
            path: '/',
            name: 'Home',
            component: Homepage
        },
        {
            path: '/about',
            component: About
        }
    ]
});

Apps.js:

import Vue from 'vue';
import routes from './routes';
import Buefy from 'buefy';
import App from './components/App';
import './plugins/element.js';
import '@mdi/font/css/materialdesignicons.css';

require('./bootstrap');

Vue.use(Buefy, {});

new Vue({
    router: routes,
    render: h => h(App),
  }).$mount('#app')

I guess the old structure is not compatible with vue-router.

0👍

In your Routes.js file.

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

export default new Router({
    mode: 'history',

    routes: [
      {
        path: '/',
        name: 'Home',
        component: Homepage
      },
      {
        path: '/about',
        component: About
      }
    ]
})

Then in your app.js file:

import router from './router'

router.beforeEach((to, from, next) => {
  document.title = to.meta.title || "Cat";
  next();
});

new Vue({
  router,
  render: h => h(Header)
}).$mount('#app')

Header.vue

    <template slot="start">
      <b-navbar-item tag="router-link" :to="{ name: 'about' }">About</b-navbar-item>
    </template>

Leave a comment