Vue.js 2 multiple routing files

Question

I want to start using vue.js on a large application. The application will have 50+ modules with each module having multiple components.

My plan is to create sub folders under the components folder to act as modules, with each folder containing it's related component files.

I don't want the router/index.js file to have hundreds of routes defined in it, as this will be unmanageable.

It would be nice to put a routes.js file in each module folder.

Is this possible and how or is there a better way.

Answer 1

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!

Answer 2

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 ellipsis
You've got the idea

Answer 3

I don't know if it's the best approach to use JS itself I 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