A tool to generate routes for Vue-Router with Vite.

Last update: Jul 24, 2022

v-route-generate

A tool to generate routes for Vue-Router with Vite.

Getting Started

Install v-route-generate

# Choose a package manager you like.

# NPM
npm install v-route-generate --save

# Yarn
yarn add v-route-generate

# pnpm
pnpm install v-route-generate

Usage

route file

// file: src/router/index.ts
import { createRouter, createWebHistory } from "vue-router";
import { getRoutes } from "v-route-generate";
const routes = getRoutes(import.meta.glob("src/views/**/**.vue"), {
  pathRoot: "views/",
});
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
});
router.beforeResolve(async (to) => {
  console.log(to);
});

console.log(routes);

export default router;

Dir tree

Tree of the src/views/ dir:

.
│  AboutView.vue
│  HomeView.vue
│  
└─Hello
    │  HiView.vue
    │  
    └─ChildA
            HomeView.vue

Result Example

The result is that the TS file does not use TSX, which is just for the convenience of display.

[
    {
      path: "/AboutView",
      component: () => import("../views/AboutView.vue"),
    },
    {
      path: "/",
      component: () => import("../views/HomeView.vue"),
    },
    {
      path: "/Hello",
      component: <RouterView />,
      children: [
        {
          path: "HiView",
          component: () => import("../views/Hello/HiView.vue"),
        },
        {
          path: "ChildA",
          component: <RouterView />,
          children: [
            {
              path: "",
              component: () => import("../views/Hello/ChildA/HomeView.vue"),
            },
          ],
        },
      ],
    },
  ]

Naming rules

  • pascal style

  • suffix is View

    e.g. HelloWorldView.vue

  • homepage is HomeView.vue

Path ID or Param

Not supported now. Use sessionStorage to implement, Please.

Contribution

Welcome to contribute code.

npm i

License

MIT

Copyright (c) 20022-present, Quanju Wei

GitHub

https://github.com/weiquanju/v-route-generate
You might also like...

Touring Vue Router Example App

Touring Vue Router Example App This is the Vue 3 application we build step by step in the Touring Vue Router course on Vue Mastery. It's starting code

Dec 30, 2021

Vue Router route config generator

vue-route-generator Vue Router route config generator. You may want to use vue-auto-routing for auto generating routing or vue-cli-plugin-auto-routing

Jul 3, 2021

Automated generation of vue-router

自动生成router文件 通常情况下一个vue项目,随着时间的增加,router会越来越多,而大部分的代码其实都是重复的,修改很麻烦,还不如通过工具生成。

Oct 13, 2021

Lightweight layout resolver for Vue Router

vue-router-layout Lightweight layout resolver for Vue Router. You may want to use vue-cli-plugin-auto-routing which includes all useful features on ro

Jul 6, 2022

Filesystem based route generation for Webpack + vue-router

@badrap/routdir Filesystem based route generation for Webpack + vue-router. @badrap/routdir is based on Sapper's pages and layouts features, with some

Jan 25, 2021

VRouteHelper - package to add that kind of syntax for vue-router.

VRouteHelper I really like how easy it is to specify routes in Laravel so I made this package to add that kind of syntax for vue-router. Any feedback

Apr 25, 2019

Vue route change loading. using Router Navigation Guards.

Vue Router Loading Easy to use and highly customizable Vue Router Loading. Getting started Install the package: npm install vue-router-loading Import

Mar 17, 2022

A MOD version based on vue-router

vue-router-mod This is a MOD version based on vue-router 3.1.3. Introduction vue-router-mod provides extra apis to replace/remove route dynamically. I

Dec 14, 2020

Provides a wrapper for router-view that allows you to show error pages without changing the URL.

vue-error-page Provides a wrapper for router-view that allows you to show error pages without changing the URL. Why? Because: Trigger router-view chan

Apr 6, 2022
Generate sitemap.xml by vue-router configuration

vue-router-sitemap Generate sitemap.xml by vue-router configuration Install npm i --save vue-router-sitemap Example usage // router.js import VueRout

Aug 9, 2022
Generate Vue Router routing automatically for multipages

Generate Vue Router routing automatically for multipages

Jul 20, 2022
Tidy routes definitions across your entire project

vue-tidyroutes plugin VueJS routes definitions that can be created anywhere in your project. Under the hood It's just a singleton object that store al

Aug 3, 2021
Elegant, fluent route definitions for Vue Router, inspired by Laravel. v3 is currently in beta. [email protected]

Elegant, fluent route definitions for Vue Router, inspired by Laravel. Routisan 3 is currently in beta. Stable release around the corner! npm i vue-ro

Jul 27, 2022
🚦This is the repository for Vue Router 4 (for Vue 3)
🚦This is the repository for Vue Router 4 (for Vue 3)

vue-router This is the repository for Vue Router 4 (for Vue 3) Supporting Vue Router Vue Router is part of the Vue Ecosystem and is an MIT-licensed op

Aug 10, 2022
🚦 The official router for Vue.js.
🚦 The official router for Vue.js.

vue-router This is vue-router 3.0 which works only with Vue 2.0. For the 1.x router see the 1.0 branch. Supporting Vue Router Vue Router is part of th

Aug 14, 2022
A Trie-based vue router with the ability of managing history.state.

vue-pilot A Trie-based vue router with the ability of managing history.state. Install npm install vue-pilot Features Small (8kb after gzipped). Abili

Nov 16, 2020
Vue Router route config generator

vue-route-generator Vue Router route config generator. You may want to use vue-auto-routing for auto generating routing or vue-cli-plugin-auto-routing

Aug 3, 2022
Hello-vue-router

hello-vue-router Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build

Dec 23, 2021