Official document portal: vite-plugin-pages

Everybody is good! I am Erdan, front-end food jiyi. Recently, I learned about vitesse, an open source scaffold, which used the plug-in of Viet-plugin-Pages to simply record the functions of various configuration attributes and test demo. The installation method can be directly read in the official document. Please point out any mistakes (scold lightly, please)

Attached is the project Vitesse-Route-Demo that I learned to configure for this plug-in, in which there are some simple page codes of mine. The effect of this article will be better if you match the codes. If possible, you can click star

Configuration properties

Most of the configuration in this article is written in viet.config. ts->defineConfig->plugins->Pages

Specify the folder where routes are to be generated

Type: string | array

The default path is SRC /pages

Pages({
  // default
  pagesDir: 'src/pages'
})
Copy the code

You can modify it yourself

Pages({
  pagesDir: [{dir: 'src/pages'.baseRoute: ' ' },
   The // SRC /features/pages folder will generate a route like /features/filename
   { dir: 'src/features/pages'.baseRoute: 'features' },
   // Recognize pages files under multiple categories of fruits
   { dir: 'src/fruits/**/pages'.baseRoute: 'fruits'},]})Copy the code

Specify the file to generate the route from

Type: array

Pages({
  // Identify files with vue and MD suffixes as routes (MD files require plugin support)
  extensions: ['vue'.'md'],}Copy the code

Loading way

Type: ‘sync’ | ‘async’ | (stirng) = > ‘sync’ : ‘async’

The global route loading mode can be set directly, or it can be converted to synchronous loading by setting the syncIndex configuration item

You can also determine the loading method by passing in a method that returns sync and async

Pages({
  importMode: 'async'.// As long as the route contains fruits, it will become asynchronous lazy loading
  // importMode(path) {
  // return path.includes('fruits') ? 'async' : 'sync'
  // },
})
Copy the code

Routing block language type

Type: string

After using the automatic routing plug-in, some of our routing information is not written in the config file, so in the SFC file, we can use the Route tag to fill in some of the necessary routing information.

Pages({
  routeBlockLang: 'json5',})Copy the code

The default is to use JSON5 (our common object syntax)

<route>
{
  meta: {
    layout: 'default'
  }
}
</route>
Copy the code

If you don’t use the default, you can specify that route blocks are written using YAML

<route lang="yaml">
meta:
  layout: 404
</route>
Copy the code

Replacing square brackets (in the experiment) (there seems to be something wrong with the official issue, I did not test successfully)

Types: Boolean

This configuration replaces the [] prefix for identifying dynamic routes with the _ prefix, similar to the nuxtJS style

NuxtStyle Routing style

Should be more user-friendly, convenient nuxtJS migration?

Route processing method

Type: the function

After writing, we can use this method to obtain a single route object, and then perform certain operations on the object, such as setting identity verification, setting layout

      extendRoute(route) {
        // console.log(route.path)
        // To test the effect of this method, replace a layout that contains a fruit string
        if (route.path.includes('fruit')) {
          return {
            ...route,
            meta: { layout: 'home'}}},return route
      },
Copy the code

Routes Processing method

Type: the function

After writing, the entire array can be retrieved, and the route can be processed after being retrieved through a loop

      // Process the information about the routes as a whole, and then process it accordingly
      onRoutesGenerated(routes) {
        const temp_routes = JSON.parse(JSON.stringify(routes))
        temp_routes.forEach((item: any) = > {
          // Change the layout that contains the fruit string
          if (item.path.includes('fruit')) {
            item.meta = {
              layout: 'home',}}})return temp_routes
      },
Copy the code

ClientCode processing method

Type: the function

After writing, you can get the code rendered by the plug-in. Here we can use string manipulation to intercept the code.

      // This involves changing the client code
      onClientGenerated(clientCode) {
        // Can get the complete code of the route we actually generated, string format,
        // It feels like this method can be replaced by regex, or various string operations
        return clientCode
      },
Copy the code

Common Usage Scenarios

This section can be seen at the very end of the document, and will be updated later