Split vUE routes into multiple files (VUe-Router directory structure)

For slightly more complex projects, the routing files we define get bigger and bigger, and all the routes are mixed up on one page, which is confusing and not clear.

Therefore, we want to divide the vue route into multiple routing files according to the function, similar to laralel. The final route structure is similar to the following: routes/ index.js

account.js student.js business.js ... Js school/user-center.js...Copy the code

The code for index.js is as follows:

import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter) // Import another routing file import accountRoutes from '@/account'; import studentRoutes from '@/student'; import schoolAccountRoutes from '@/school/account'; const baseRoutes = [ ... ] ; const routes = baseRoutes.concat(accountRoutes, studentRoutes, schoolAccountRoutes); export default new VueRouter({ routes, });Copy the code

Other file codes:

let routes = [
    {
        path: '/',
        name: 'home',
        component: require('./pages/Home'),
        meta: {}
    },
    {
        path: '/about',
        component: require('./pages/About'),
        meta: {}
    },
    {
        path: '/posts/:id',
        name: 'posts',
        component: require('./pages/posts/Post'),
        meta: {}
    },
];

export default routes;
Copy the code