What is routing in Vue.js?

A web application is not a stand-alone application, it has different web pages that have different functionalities.

Imagine that you visited a restaurant management web application developed in Vuejs. This web application would have a lot of web pages, like:

  • Home page
  • Menu page
  • Bookings page
  • Customer reviews page

What manages the user in a web application?

As the name suggests, the vue-router manages the user’s routes and enables the user to visit different web pages in a single web application. vue-router is a library that exists in vuejs packages. This library manages all the routing on the browser, and can be imported in the following way:

index.js
router.js
import home from '@/components/home'
import menu from '@/components/menu'
import bookings from '@/components/bookings'
import reviews from '@/components/reviews'
export default new Router({
  webRoutes: [
    {
      path: '/home',
      name: 'home',
      component: home
    },
    {
      path: '/menu',
      name: 'menu',
      component: menu
    },
    {
      path: '/bookings',
      name: 'bookings',
      component: bookings
    },
    {
      path: '/reviews',
      name: 'reviews',
      component: reviews
    }
  ]
})

index.js uses the routes set in routes.js and enables the user to visit these web pages. A route has 3 properties:

  • path: a URL used to visit that web page.
  • name: uniquely identifies that web page from its name.
  • component: the actual code or functionality of that web page that is imported in our router.js file.

How is routing managed?

Routing is managed by the navbarsome buttons that allow a user to be taken to those web pages. Of course, no developer wants the user to type the URL paths in the browser to visit web pages; hence, why developers use either links or buttons that route users to the relevant web page when clicked.

Free Resources

License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)