Categories

Tuesday, December 3, 2024
#919814419350 therichposts@gmail.com
LaravelLaravl 5.7VueJs

Vue Laravel Tutorial Part 5 – Vue Routing

Vue Laravel Tutorial Part 5 – Vue Routing - The Rich Post

Hello to all, welcome to therichpost.com. In this post, I will continue with Vue Laravel Tutorial Part 5 Series – Vue Laravel Tutorial Part 5  – Vue Routing.

I feel very happy, when I share the post because this something related to me like my knowledge, my writing skills, something I can share to the world.

In this post, I will share very important part, which is Routing. Routing means the way, which we can go here and there. Simple means, we can travel every part or page to Application or website.

Here I am sharing some picture related to Vue Routing:

 

Router1

Router2

 

One thing must say, To understand this post, you need to see past Vue Laravel Tutorials Posts and here are the links: 

https://therichpost.com/vue-laravel-tutorial-part-1

https://therichpost.com/vue-laravel-tutorial-part-2

https://therichpost.com/vue-laravel-tutorial-part-3

https://therichpost.com/vue-laravel-tutorial-part-4-form-validation

Here is the complete working code for Vue Laravel Routing Process:

I have change my app.js file code and ExampleComponent.vue file code that you will find in my past Vue Laravel Tutorial Posts:

 

1. First, you I ran below command into my terminal to add fresh Vuejs but laravel do this by default:

With this advance Vuejs will be installed to our application:

npm install vue
2. Second, for add routing to my Vuejs application, I ran below command into my terminal:

Router Module will be add:

npm install vue-router
3. I have also added Bootstrap into it by run below command into terminal:

With this, we can add more Vue Bootstrap feature, which are interrelated.

npm i bootstrap-vue
4. After done the command, I added below code into  my resources/js/app.js file:

This is main file, In which, we declare the component, Vuejs modules and make the routes:

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

import BootstrapVue from 'bootstrap-vue'

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

// Imported components
import examplecomponent from './components/ExampleComponent.vue';
import adduser from './components/AddUser.vue';


// Route
const routes = [
  { name: 'adduser', path: '/AddUser', component: adduser },
  { name: 'examplecomponent', path: '/', component: examplecomponent }
];

// Setup Vue Router
const router = new VueRouter({ 
  mode: 'history', 
  routes: routes,
  linkActiveClass: "", // active class for non-exact links.
  linkExactActiveClass: "active" // active class for *exact* links.
});
new Vue(Vue.util.extend({ router }, examplecomponent)).$mount('#app');
 5. After that, I added below code into my resources\js\components\ExampleComponent.vue file:

In this file, I wrote code for router-link, which transfers to one component to other like anchor tags.

<template>
   <div class="container">
      <nav class="navbar navbar-expand-sm bg-light">
         <!-- Links -->
         <ul class="navbar-nav">
        <li class="nav-item">
               <router-link tag="li" class="nav-item" to="/laraveVue">
                  <a class="nav-link">Home</a>
               </router-link>
            </li>
            <li class="nav-item">
               <router-link tag="li" class="nav-item" to="/AddUser">
                  <a class="nav-link">Add user</a>
               </router-link>
            </li>
         </ul>
      </nav>
      <div class="card card-default">
         <div class="card-header">TheRichPost</div>
         <div class="card-body">
            I'm an example component.
      <br>
            <router-view></router-view>
         </div>
      </div>
   </div>
</template>
<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

 After all added the above code, we need to npm run watch and php artisan serve commands to run our application.

If you have any query related to this post, then please comment below or ask questions.

 

 

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 19, MedusaJs, Next.js, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.