CODEWITHSUNDEEP
javascriptvue.js
Maruf Ahmed
Maruf Ahmed

Reputation: 115

vue component not showing by router

I'm new to VueJs. I'm try to develop a theme using VueJs, I'm facing a problem by router, 'component not showing'. here is my code

Pagea.vue

<template>
    <div>
        <h1>Hello This is a test</h1>
    </div>
</template>

<script>
export default {
    name : "Pagea"
}
</script>

App.vue

<template>
  <div id="app">   

    <router-link to="/">Go to Foo</router-link>
    <router-link to="/Pagea">Go to Bar</router-link>

    <router-view></router-view>

  </div>
</template>

<script>

export default {
  name: 'app',
  components: {
    Header,
    Footer
  }
}
</script>

main.js

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';


Vue.use(BootstrapVue);
Vue.use(VueRouter);

Vue.config.productionTip = false;

//Router
import Pagea from './components/Pagea.vue';

const routers = [
  { 
    path: '/pagea',
    name : 'Pagea',
    component : Pagea     
  }
];

const router = new VueRouter({
  routers,
  mode : 'history'
});

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

There is no console error, but still to result. i don't know why the component or data not showing only empty page. please anyone could tell me what i did miss. As i early mansion that i'm new and still learning. Thank you.

Upvotes: 2

Views: 6591

Answers (1)

acarlstein
acarlstein

Reputation: 1838

The more sure, the issue is that your:

<router-link to="/Pagea">Go to Bar</router-link>

Should be:

<router-link to="/pagea">Go to Bar</router-link>

Since you have it declare as such in your router:

{ 
    path: '/pagea', /* lower-case here */
    name : 'Pagea',
    component : Pagea     
  }

.....................................................................................................

However, if that doesn't solve it, then try the following:

Try the following and let me know if it did work for you.

Pagea.vue, remove the export and set the className to the div tag:

<template>
    <div class="pagea">
        <h1>Hello This is a test</h1>
    </div>
</template>

Keep your vue files as clean an simple as you can. Don't go mixing stuff there.

Remove the export out of your App.vue and make sure your to matches as case-sensitive. In this case, you were indicating to go to '/Pagea' when your route was setup for '/pagea'

<template>
  <div id="app">   
    <router-link to="/">Go to Foo</router-link>
    <router-link to="/pagea">Go to Bar</router-link>

    <router-view></router-view>

  </div>
</template>

Move your router code into its own JS file:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Pagea from './components/Pagea.vue';

let routes = [
  {
    path: '/pagea',
    name : 'pagea', /* Keep the name lowercase as in the className */
    component: Pagea  
  }
];

export default new Router({
 routes: ...
}

It will make your code cleaner and easier to maintain than everything in one file.

Then you can call your router.js in your main.js

import router from './router'

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

Upvotes: 2

Related Questions