Vue.js 2 multiple routing files

You can definitely do this, but at the end of the day you'll want to import them all into a single routes.js file.

This article covers your situation with one solution: https://medium.com/@disjfa/lets-route-a-vue-app-aa9c3f3dbdf8

Another way I'd consider implementing this is by exporting a const of routes from each module, importing them into the top level routes.js, and using that file in App.vue.

Good luck!

You can put each group of routs in its own file, then import those files and merge the routes using spread operator.

Here is an example:

router/index.js

import moduleRoutes1 from "./path/to/moduleRoutes1"import moduleRoutes2 from "./path/to/moduleRoutes2"const router = new Router({    mode: 'history',    routes: [      ...moduleRoutes1,      ...moduleRoutes2      //etc.       //Note '...' here is a "spread operator" and not ellipsis    ]

router/moduleRoutes1

let VuePage1 = () => import(/* webpackChunkName: MyChunk */ '@/path/to/VuePage1')let VuePage2 = () => import(/* webpackChunkName: MyChunk */ '@/path/to/VuePage2')import moduleRoutes1_1 from "./path/to/moduleRoutes1_1"export default [    {        path: '/some/path/1',        name: 'pathName1',        component: VuePage1,    },    {        path: '/some/path/2',        name: 'pathName2',        component: VuePage2,    },    ...moduleRoutes1_1 //dividing modules further if needed]

router/moduleRoutes2

... //now it's ellipsisYou've got the idea

I don't know if it's the best approach to use JS itselfI created files like

import Profile from '../views/user/Profile'import Login from '../views/user/Login'export default [ {   path: '/',   name: 'Login',   component: Login,   meta: {      allowAnonymous: true   } },{   path: '/profile',   name: 'Profile',   component: Profile,   beforeEnter: (to, from, next) => {     if (!store.state.userIsLogged) next({ path: '/', replace: true })     else next()   } }]

and in the index.js file I import the file that creates and uses the spread operator

import UserRouter from './user'const routes = [   ...UserRouter,]

any observation can speak