vite-plugin-vue-router

vite-plugin-vue-router is File system base vue-router plugin for Vite

Quick start

1. install

yarn add vite-plugin-vue-router -D

2. Use it in your project

Use it in vite.config.js

import configRouterPlugin from 'vite-plugin-vue-router';

export default defineConfig({
  plugins: [
    configRouterPlugin(),
  ],
});

3. Introduce the required packages in main.js

import { createApp } from 'vue';
import App from '. /src/App.vue';
import router from '@pages-generated';
createApp(App).use(router).mount('#app');

4,middleware

//type1 test.js
//this type will be used as router.beforeEach
export default ({to,from,next}) => {}


//type2 test2.js
//this type will be used as router.beforeEach and router.afterEach
const beforeEach = ({to,from,next}) => {};
const afterEach = ({to,from}) => {};
export default {beforeEach,afterEach};

Project directory

vite-plugin-vue-router uses an agreed-upon directory format, so we need to follow this development style. It is often an effective measure to achieve uniformity and efficiency in a project.

├── public
├── src
    ├── layout
        ├─ Index.vue
    ├─ middleware
    ├── views
        └── Index.vue
    └── App.vue
├── index.html
├─ package.json
├─ vite.config.ts