Vue.js 2 Design Patterns and Best Practices

Defining routes

To separate out the routes into different files within our application, we can firstly create a file under src/components/user named user.routes.js. Each time we have a different feature set (that requires routes), we can create our own *.routes.js file that can be imported into the router's index.js.

For now, we can just export a new empty array:

export const userRoutes = [];

We can then add the routes to our index.js (even though we have none defined yet):

import { userRoutes } from '../components/user/user.routes';const routes = [...userRoutes];

We're using the ES2015+ spread operator, which allows us to use each object in the array instead of the array itself.

To then initialize the router, we can then create a new VueRouter ...