Vue route config “component” for path: / cannot be a string id

Question

I am learning Vue Js - v2.5.3 .

i am using component and route concept for develop project. where component is working but when i am try to define route then getting error

Uncaught Error  ::  route config component for path: /signin cannot be a string id.
Use an actual component instead.

or

 Uncaught Error  ::  route config component for path: / cannot be a string id.
Use an actual component instead.

I am unable to understand what is going wrong. please help me. when i am running npm run dev then vue compiling become done but getting error on browser console.

My code is on App.js

window.Vue = require('vue');
import VueRouter from 'vue-router';
 Vue.use(VueRouter);

 const homePage =   Vue.component('home', require('./components/Home.vue'));
 const example_comp =    Vue.component('example', require('./components/Example.vue'));
 const registration =   Vue.component('signin', require('./components/Signin.vue'));

  const router = new VueRouter({
routes: [
    {
        path : '/',
        // name : 'home',
        component : 'home',
    },
    {
        path : '/signin',
        // name : 'signin',
        component : 'signin',
    },
    {
        path : '/example',
        // name : 'example',
        component : 'example',
    }
]
});

const app = new Vue({
el: '#app',
router: router,
});

Home.blade.php

    <div id="app">
    <p > <router-link to="/usersSignIn">User Regitration </router-link></p>
    <p ><router-link to="/login"> Login  </router-link></p>


    <router-view></router-view>

</div>

Component :: Home.vue

 <template>
 <div>
    <p> This home page.</p>
 </div>
 </template>
 <script>
 export default {

 }
 </script>

Answer 1

You need to change your const router as below mentioned:

const router = new VueRouter({
routes: [
    {
        path : '/',
        // name : 'home',
        component : homePage,
    },
    {
        path : '/signin',
        // name : 'signin',
        component : registration,
    },
    {
        path : '/example',
        // name : 'example',
        component : example_comp,
    }
]
});

Answer 2

config route file like this

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);


const router = new VueRouter({
    routes: [
        { path: '/', component: require('./components/HomeComponent.vue').default },
        { path: '/about', component: require('./components/AboutComponent.vue').default },
    ]
})

new Vue({
    router
}).$mount('#app')

next, add the below line to the view to want show routes

<router-view></router-view>

Answer 3

i writtened worng code in app.js file old code was

 const app = new Vue({
 el: '#app',
router = router,
 });

correct code is

    const app = new Vue({
    el: '#app',
    router : router,
    });

So after that i did not checked and run npm run dev.... second changes i made with component

component: require('home' , './components/Home.vue')