While the options we reviewed for routing, serve our needs in a small project like our example, presumably you will need more options as your project grows. For instance, if we decide later to change /login
URL to /signin
, we will have to update all the links directing to the login page. To prevent this from happening, we can give each route a name.
To name a route we have to update the route configuration file.
src/main.js
:
router.map({ '/': { name: 'home', // give the route a name component: require('./components/Hello.vue') }, '/login': { name: 'login', // give the route a name component: require('./components/Login.vue') }, '/stories': { name: 'stories', component: require('./components/Stories.vue'), subRoutes: { '/famous': { component: require('./components/Famous.vue') }, } }, })
We can give a name to a route...