Laravel Vue Basic (Use of Vue Router)

 Vue Router Documentation: https://router.vuejs.org/installation.html

1) In terminal run the command: 

npm install vue-router

2) As we will have many routes, so we will make a new file for that inside resources -> js create

router.js file.

3) Open router.js file and import Vue & Router:

import Vue from 'vue'

import Router from 'vue-router'

Now, we will use the route. So, in router.js file:

Vue.use(Router)

const routes = [

    {

        path: '/my-new-vue-route',

        component: 

    }

];

Here, we have given a path url name (you can give anything as url name). and the component is blank.

we will first make a folder called pages inside resources -> js -> components. 

and, create a file inside pages folder called myFirstVuePage.vue .

4) Inside myFirstVuePage.vue file write:

<template>

  <div>

    <h1>This is our first page</h1>

  </div>

</template>

5) Now, again go back to router.js file, we will import this component.

Write import in router.js file like the following example and use in component:

import Vue from 'vue'

import Router from 'vue-router'

Vue.use(Router)

import firstPage from './components/pages/myFirstVuePage'

const routes = [

    {

        path: '/my-new-vue-route',

        component: firstPage

    }

];

export default new Router({

    mode: 'history',

    routes

});

6) and we need to import routes in app.js file: 

require('./bootstrap');

window.Vue = require('vue');

import router from './router'

Vue.component('mainapp', require('./components/mainapp.vue').default);

const app = new Vue({

    el: '#app',

    router

});

 

7) Inside mainapp.vue write:

<template>

  <div>

    <h1>This is the first component</h1>

    <router-view></router-view>

  </div>

</template>

8) In terminal run: npm run watch

9) Now hit the /my-new-vue-route and you will see the the component is loaded successfully.