Structuring Vue navigation with Vue Router

When building an enterprise-ready application, it’s evident that the navigation system will be massive since there will be many navigations, routes, and pages.

This section will show you how to structure Vue Router in your enterprise project properly. To achieve this, we will use the split-by-feature approach to organizing Vue Router so that it’s easy to navigate, as we achieved with Vuex earlier in the chapter.

This approach will create a structure where public and private routes will be separated, and more routes can also be separated individually.

The folder structure

The folder will comprise an index file, a public file, and a private file containing all the routes belonging to each category.

In the root of your src folder, create a router folder and create the following files inside the folder by typing in the following commands one after the other in your terminal:

cd src && mkdir router
touch...