Vue Router Redirects

You can configure Vue Router to redirect from one URL to another using the redirect option.

For example, the below tabbed UI has 3 links: one to / , one to /about , and one to /about-us . The /about-us link is configured to redirect to /about .

Below is the Vue Router config. Note the redirect on the /about-us path.

const router = new VueRouter({ routes : [ { path : '/' , component : { template : '<h1>Home</h1>' } }, { path : '/about' , component : { template : '<h1>About Us</h1>' } }, { path : '/about-us' , redirect : '/about' } ] });

Below is the actual app. Note that the router-link for the "About Us Alternate" tab points to /about-us .

const app = new Vue({ router, template : ` <div class="rendered-content"> <div> <router-link to="/">Home</router-link> <router-link to="/about">About Us</router-link> <router-link to="/about-us">About Us Alternate</router-link> </div> <div class="tab-content"> <router-view></router-view> </div> </div> ` }).$mount( '#vue-redirect-example' );

Programmatic Navigation

You can also programatically navigate using the router's push() method. The below example uses $router.push() to send the user to the /about-us URL.

const app = new Vue({ router : router2, methods : { redirect : function ( path ) { this .$router.push({ path }); } }, template : ` <div class="rendered-content"> <div> <router-link to="/">Home</router-link> <router-link to="/about">About Us</router-link> <span @click="redirect('/about-us')">About Us Alternate</span> </div> <div class="tab-content"> <router-view></router-view> </div> </div> ` }).$mount( '#vue-redirect-example' );

More Vue Tutorials