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:
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.jsfile.
How is routing managed?
Routing is managed by the links or buttons that route users to the relevant web page when clicked.
