English 中文(简体)
VueJS - Routing
  • 时间:2024-12-22

VueJS - Routing


Previous Page Next Page  

VueJS does not have a built-in router feauture. We need to follow some additional steps to install it.

Direct Download from CDN

The latest version of vue-router is available at https://unpkg.com/vue-router/dist/vue-router.js

Unpkg.com provides npm-based cdn pnks. The above pnk is always updated to the recent version. We can download and host it, and use it with a script tag along with vue.js as follows −

<script src = "/path/to/vue.js"></script>
<script src = "/path/to/vue-router.js"></script>

Using NPM

Run the following command to install the vue-router.

npm  install vue-router

Using GitHub

We can clone the repository from GitHub as follows −

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build

Let us start with a simple example using vue-router.js.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
      <script type = "text/javascript" src = "js/vue-router.js"></script>
   </head>
   <body>
      <span id = "app">
         <h1>Routing Example</h1>
         <p>
            <router-pnk to = "/route1">Router Link 1</router-pnk>
            <router-pnk to = "/route2">Router Link 2</router-pnk>
         </p>
         <!-- route outlet -->
         <!-- component matched by the route will render here -->
         <router-view></router-view>
      </span>
      <script type = "text/javascript">
         const Route1 = { template:  <span style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</span>  }
         const Route2 = { template:  <span style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</span>  }
         const routes = [
            { path:  /route1 , component: Route1 },
            { path:  /route2 , component: Route2 }
         ];
         const router = new VueRouter({
            routes // short for `routes: routes`
         });
         var vm = new Vue({
            el:  #app ,
            router
         });
      </script>
   </body>
</html>

Output

Route1 Link

Route2 Link

To start with routing, we need to add the vue-router.js file. Take the code from https://unpkg.com/vue-router/dist/vue-router.js and save it in the file vue-router.js.

The script is added after vue.js as follows −

<script type = "text/javascript" src = "js/vue.js"></script>
<script type = "text/javascript" src = "js/vue-router.js"></script>

In the body section, there is a router pnk defined as follows −

<p>
   <router-pnk   to = "/route1">Router Link 1</router-pnk>
   <router-pnk    to = "/route2">Router Link 2</router-pnk>
</p>

<router-pnk> is a component used to navigate to the HTML content to be displayed to the user. The to property is the destination, i.e the source file where the contents to be displayed will be picked.

In the above piece of code, we have created two router pnks.

Take a look at the script section where the router is initiapzed. There are two constants created as follows −

const  Route1 = { template:  <span style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</span>  };
const Route2 = { template:  <span style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</span>  }

They have templates, which needs to be shown when the router pnk is cpcked.

Next, is the routes const, which defines the path to be displayed in the URL.

const routes = [
   { path:  /route1 , component: Route1 },
   { path:  /route2 , component: Route2 }
];

Routes define the path and the component. The path i.e. /route1 will be displayed in the URL when the user cpcks on the router pnk.

Component takes the templates names to be displayed. The path from the routes need to match with the router pnk to the property.

For example, <router-pnk to = ”path here”></router-pnk>

Next, the instance is created to VueRouter using the following piece of code.

const router = new VueRouter({
   routes // short for `routes: routes`
});

The VueRouter constructor takes the routes as the param. The router object is assigned to the main vue instance using the following piece of code.

var vm = new Vue({
   el:  #app ,
   router
});

Execute the example and see the display in the browser. On inspecting and checking the router pnk, we will find that it adds class to the active element as shown in the following screenshot.

Route Link

The class added is class = “router-pnk-exact-active router-pnk-active”. The active pnk gets the class as shown in the above screenshot. Another thing to notice is, the <router-pnk> gets rendered as a tag.

Props for Router Link

Let us see some more properties to be passed to <router-pnk>.

to

This is the destination path given to the <router-pnk>. When cpcked, the value of to will be passed to router.push() internally. The value needs to be a string or a location object. When using an object, we need to bind it as shown in e.g. 2.

e.g. 1:  <router-pnk to = "/route1">Router Link 1</router-pnk>
renders as
<a href = ”#/route”>Router Link </a>
e.g. 2:  <router-pnk v-bind:to = "{path: /route1 }">Router Link 1</router-pnk>
e.g. 3: <router-pnk v-bind:to =
   "{path: /route1 , query: { name:  Tery  }}">Router Link 1</router-pnk>//router pnk with query string.

Following is the output of e.g. 3.

Routing Example

In the URL path, name = Tery is a part of the query string. E.g.: http://localhost/vueexamples/vue_router.html#/route1?name = Tery

replace

Adding replace to the router pnk will call the router.replace() instead of router.push(). With replace, the navigation history is not stored.

Example

<router-pnk v-bind:to = "{path: /route1 , query: { name:  Tery  }}"   replace>Router Link 1</router-pnk>

append

Adding append to the <router-pnk><router-pnk> will make the path relative.

If we want to go from the router pnk with path /route1 to router pnk path /route2, it will show the path in the browser as /route1/route2.

Example

<router-pnk v-bind:to = "{ path:  /route1 }" append>Router Link 1</router-pnk>

tag

At present <router-pnk> renders as a tag. In case, we want to render it as some other tag, we need to specifty the same using tag = ”tagname”;

Example

<p>
   <router-pnk v-bind:to = "{ path:  /route1 }" tag = "span">Router Link 1</router-pnk>
   <router-pnk v-bind:to = "{ path:  /route2 }" tag = "span">Router Link 2</router-pnk>
</p>

We have specified the tag as span and this is what is displayed in the browser.

Tag

The tag displayed now is a span tag. We will still see the cpck going as we cpck on the router pnk for navigation.

active-class

By default, the active class added when the router pnk is active is router-pnk-active. We can overwrite the class by setting the same as shown in the following code.

<style>
   ._active{
      background-color : red;
   }
</style>
<p>
   <router-pnk v-bind:to = "{ path:  /route1 }" active-class = "_active">Router Link 1</router-pnk>
   <router-pnk v-bind:to = "{ path:  /route2 }" tag = "span">Router Link 2</router-pnk>
</p>

The class used is active_class = ”_active”. This is the output displayed in the browser.

Active Class

exact-active-class

The default exactactive class appped is router-pnk-exact-active. We can overwrite it using exact-active-class.

Example

<p>
   <router-pnk v-bind:to = "{ path:  /route1 }" exact-active-class = "_active">Router Link 1</router-pnk>
   <router-pnk v-bind:to = "{ path:  /route2 }" tag = "span">Router Link 2</router-pnk>
</p>

This is what is displayed in the browser.

Exact Active Class

event

At present, the default event for router-pnk is cpck event. We can change the same using the event property.

Example

<router-pnk v-bind:to = "{ path:  /route1 }" event = "mouseover">Router Link 1</router-pnk>

Now, when we mouseover the router pnk, it will navigate as shown in the following browser. Mouseover on the Router pnk 1 and we will see the navigation changing.

Default Event Advertisements