How to structure router.js file in VueJs?

Question

I want to structure my router.js file as currently there is around 500 lines of code in it.

{
            path: "/",
            component: () => import("./../src/views/dashboard/Dashboard.vue"),
            meta: {
                auth: true,
                title: "Dashboard"
            }
        },
        {
            path: "/regionWiseDashboard",
            component: () => import("./../src/views/dashboard/RegionWiseDashboard.vue"),
            meta: {
                auth: true,
                title: "Dashboard"
            }
        },

The above code is repeating for every component I include in my project which just makes the code look more and more unreadable. Can I structure it anyhow? Maybe put all files in an JSON or divide the main js file into children js files?

an JSON object - no such thing ... did you mean JSON or an object? — Jaromanda X
– Jaromanda X, Commented Jan 18, 2020 at 7:59
@JaromandaX that was a typing error. Sorry for that. Your comment would have been of more help if you would have answered my question though. — BeaST 30
– BeaST 30, Commented Jan 18, 2020 at 8:09
your question is, "maybe put all the files in a JSON" - this makes no sense, how does one put files into JSON? so I can't answer that. "or divide the main js file into children js files" - this again makes no sense since your problem is with a single object you are passing to create the router — Jaromanda X
– Jaromanda X, Commented Jan 18, 2020 at 8:14

Qonvex620 · Accepted Answer · 2020-01-18 08:15:33Z

3

How I structured my routes in vue.

First: create a folder named routes, inside this folder, create subfolders depends on how you group your routes. Example, villages, dashboard, user

Second: create a main route inside your routes folder. This main route will hold and import all your routes made in villages, dashboard, user.

last: import this main route to your main app.js

answered Jan 18, 2020 at 8:15

Qonvex620

3,9801 gold badge12 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to structure router.js file in VueJs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related