In the past, when we did page development based on Vue or React, we usually needed to install vue-Router or React-Router, and then manually write the routing organization file to complete the mapping of the file to the routing structure system. When there were few pages, the configuration was not cumbersome. However, when developing some large mid-back-end B-side projects, the entire configuration file can be quite large. Sometimes, if the organization result of directory files does not correspond to the routing hierarchy, it will be very tedious to find the corresponding routing file in the future development and maintenance.

Viet-plugin-pages is a good solution to this problem, without any routing organization file, file system is the routing system!

Vue-plugin-pages route generator based on file system

Vue Router automatically generates a routing array according to the organization structure of files in the Pages folder, input into the Vue Router instance, the file component structure determines your routing level, each time in the Pages directory to add a. Vue file, you can automatically create routes for you, no other configuration!

Of course, the Pages directory can be replaced with any directory name you want, such as views. In addition to.vue files, markdown and other formats are also supported in files.

React support is still experimental, but you can also check out its home page to learn more.

In addition, it provides support for common routing methods:

Basic route mapping

Vue-plugin-pages (VPP) automatically maps files in the Pages directory to routes with the same name:

  • src/pages/users.vue -> /users
  • src/pages/users/profile.vue -> /users/profile
  • src/pages/settings.vue -> /settings

Default indexed route

A file named index is automatically used as an index page for the route:

  • src/pages/index.vue -> /
  • src/pages/users/index.vue -> /users

Dynamic routing

Use square brackets to indicate dynamic routing, folders and files can be dynamic oh:

  • src/pages/users/[id].vue -> /users/:id (/users/one)
  • src/[user]/settings.vue -> /:user/settings (/one/settings)

Dynamic parameters need to be passed to the target page using props, such as SRC /pages/ Users /[id]. Vue routing /users/ ABC will need to pass the following parameters:

{ "id": "abc" }
Copy the code

Embedded routines by

We can create nested layouts using Vue Router subroutes. A parent component can be defined by defining the same name for the parent component as the directory containing the child routes.

When we have the following directory structure:

SRC/pages / ├ ─ ─ the users / │ ├ ─ ─ [id]. Vue │ └ ─ ─ index. The vue └ ─ ─ the users. The vueCopy the code

You get the following route configuration:

[
  {
    path: '/users',
    component: '/src/pages/users.vue',
    children: [
      {
        path: ' ',
        component: '/src/pages/users/index.vue',
        name: 'users'
      },
      {
        path: ':id',
        component: '/src/pages/users/[id].vue',
        name: 'users-id'}}]]Copy the code

Capture all routes

Capturing all routes is denoted by square brackets containing ellipses:

  • src/pages/[…all].vue -> /* (/non-existent-page)

The text after the ellipsis is used to name the route and the attribute name used to pass the route parameter.

Configuration and Implementation

First create a new VUE project using Vite:

# yarn
yarn create @vitejs/app my-vue-app --template vue-ts

cd my-vue-app

yarn add -D vite-plugin-pages

yarn add vue-router@next

Copy the code

Then add the following code to your viet.config.js:

import Vue from '@vitejs/plugin-vue';
import Pages from 'vite-plugin-pages';

export default {
  plugins: [
    Vue(),
    Pages()
  ]
};
Copy the code

Modify the main. Ts:

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import routes from 'virtual:generated-pages';
import App from './App.vue';

console.log(routes);

const router = createRouter({
  history: createWebHistory(),
  routes,
});

const app = createApp(App);

app.use(router);

app.mount('#app');
Copy the code

Modify the App. Vue:

<template>
  <router-view />
</template>
Copy the code

Now that all the configuration and pre-configuration work is done, create a Pages directory in the SRC directory and add files as you like, as in:

├ ─ ─ [... all]. Vue# capture all routes. Often used in 404├── About │ ├─ about# Visit this page via /about├ ─ ─ a blog# access via /blog│ ├ ─ ─ [id]. Vue# Dynamic routing│ ├─ ├─ Today ├─ ├─ vue ├─ vue ├─ vue# Default page when accessing local IP and port number
Copy the code

If you want to add additional file directories, you can configure them by modifying the pages-pagesdir property in viet.config. js.

The full code for the above directory can be obtained by visiting try-viet-plugins.

  • Original link: View original article