How to setup vue router in vue application.

Updated 31 July 2023

Vue Router is the official router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. Features include:

Installation:

Installation with npm.

Installation with yarn.

 

Now create “index.js”  file inside routes folder into root folder of application.

Example:-

Let’s open up the “routes/index.js” file.

We are importing createRouter and createWebHistory from the vue-router library. Next, we import the components from “views/”. On line 17 we are declaring an array of objects named routes. This array represents our routes in the application. These array items are called route objects. The first route object has a path / which means this is going to be our base URL. The component property represents what component will be rendered when the user visits this path. We will render the Home page on this path. Finally, the name property represents the name of the route.

We are pretty much following the same logic for the “/about” and “/contact” the path, we are already created home, about, contact file inside views directory/folder Now let’s jump into App.vue file.

Observe the “router-link” tags. These tags are just fancy anchor links. However unlike an anchor link (<a href=””> tag) the <router-link> will not reload the whole page. Remember Vue is a single-page application. The data for the app is already downloaded from the server. When we route to another view the application just hides some information and displays the requested information. router-link tags have a to property which refers to which page to visit. The “<router-view/>” tag is what renders the right component when navigation links are triggered.

Let’s open up the “src/main.js” file.

Here we are importing the router from “routes/index.js” which is export named “router” and use router as global using.

Thats all for setup vue-router in your Vue Application.

If you’re looking to build something amazing with Laravel and Vue, why not consider hire laravel developers who can bring your vision to life? You can also checkout our Bagisto Extensions.

 

Thanks for reading..

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

Start a Project


    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home