How to redirect to the default path with Vue Router?

Sometimes, we want to redirect to the default path with Vue Router.

In this article, we’ll look at how to redirect to the default path with Vue Router.

How to redirect to the default path with Vue Router?

To redirect to the default path with Vue Router, we can redirect / to the route we want.

For instance, we write

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

import Home from "../components/home/container";
import LiveAgent from "../components/live_agent/container";
//...

const routes = [
  {
    path: "/",
    redirect: "/home",
  },
  {
    component: Home,
    name: "home",
    path: "/home",
  },
  {
    component: LiveAgent,
    name: "liveAgent",
    path: "/live-agent",
  },
  //...
];

export default new VueRouter({
  routes,
});

to add redirect to redirect / to /home.

Then if we go to /, we see the /home route loaded.

Conclusion

To redirect to the default path with Vue Router, we can redirect / to the route we want.