Menu data generation scheme of reductive routing

Introduction: In the development of the management system, the routing based on the page directory production is a more popular and trouble saving scheme, but, can save some trouble, the menu data is also generated casually?

1. Directory and Routing

Reduced-form routing, also called file routing, does not need to be configured by hand. The file system is the routing, which analyzes the routing through directories and files and their names. Many open source frameworks support it, such as UmiJS, nuxt. js, vue-auto-routing, and so on.

Take nuxt. js reductive routing specification as an example.

1.1. Basic Routing

Suppose the directory structure of Pages is as follows:

.Heavy Exercises ── heavy exercises ── heavy exercisesCopy the code

So, the automatically generated route, routes.js, looks like this:

[{path: '/user'.name: 'user-index'.component: () = > import('@/pages/user/index.vue'),
 },{    
  path: '/user/id'.name: 'user-id'.component: () = >import('@/pages/user/id.vue') 
 },{    
   path: '/'.name: 'index'.component: () = > import('@/pages/index.vue'),}]Copy the code

1.2. Dynamic Routing

To define a dynamic route with parameters, create a Vue file or directory prefixed with an underscore.

Change the name of pages/user/id.vue to pages/user/id.vue

. ├ ─ ─ index. Vue └ ─ ─ the user ├ ─ ─ _id. Vue └ ─ ─ index. The vueCopy the code

The corresponding route configuration table is as follows:

// routes[{path: '/user'.name: 'user-index'.component: () = > import('@/pages/user/index.vue'),
 },{    
  path: '/user/:id'.// Dynamic routing
  name: 'user-id'.component: () = >import('@/pages/user/id.vue') 
 },{    
   path: '/'.name: 'index'.component: () = > import('@/pages/index.vue'),}]Copy the code

1.3 Nested routine by

You can use vue-router children to create nested routines for production.

To create inline child routing, you need to add a Vue file and a directory with the same name as the file to store the child view components.

Add a pages/user.vue file with the following directory structure:

.├ ── vue ├── id. Vue │ ├─ index.vue # template should include router-viewCopy the code

Then, the corresponding routing configuration table is generated as follows:

// routes
[{
  path: '/user'.name: 'user'.component: () = > import('@/pages/user.vue'),
  children: [{path: ' '.name: 'user-index'.component: () = > import('@/pages/user/index.vue'),
    },{
     path: 'id'.name: 'user-id'.component: () = > import('@/pages/user/id.vue'),}]}, {path: '/'.name: 'index'.component: () = > import('@/pages/index.vue'),}]Copy the code

1.4. Implementation summary

Pages /user.vue is used as an example.

. ├ ─ ─ index. Vue ├ ─ ─ the user │ ├ ─ ─ id. Vue │ └ ─ ─ index. The vue └ ─ ─ the user. The vueCopy the code

The value of the routes field in vue-router is as follows

Route and menu

Menus and routes are both tree structures. Let’s look at a simple menu data format:

[{"index": "ID" menu."title": "Menu name"."iconClass": "Menu icon"."sort": "Menu sort"."router": "Routing object for vue-Router"."children": ['... ']},'....'
]
Copy the code

2.1 Menus correspond to directories

Direct one-to-one correspondence between catalog and menu data (without copywriting customization)

The value of the field in the route can be calculated by the hierarchy of the directory and the naming of the file. However, the menu needs to have some customized content, such as menu name, menu Icon, and order. However, how to store these information?

• Save the file name: The file name will be very long and strange, obviously not appropriate. No

• Store in the contents of a file: and can parse out the structure in a specific format; Yes

Menu information is stored in a custom code block in the vue single file component.

2.2 meta extension

Vue single-file components support custom syntax blocks in addition to <template>, <script>, and <style> syntax blocks.

Vue single-file component (pages/index.vue) extends the **<route-meta>** custom syntax block of vue single-file component (pages/index.vue) :

// Single file component extension route-meta<route-meta>Export default {$layout: {name: 'home', icon: 'el-icon-home', index: 0}}</route-meta>
<template>  
  <div class="wrap">   
    Hi ,CookJS!<br />    
    path: @/pages/index.vue  
  </div>
</template>
<script>
  export default {  
    name: 'PageIndex',}</script>
<style lang="scss" scoped>
  .wrap {  display: flex; }</style>
Copy the code

With the help ofvue-template-compilerParse the code as follows:

Then write the contents of the parse custom syntax block intosrc/router/meta/index.jsFile. Was eventuallysrc/router/routes.jsFile reference

The complete data structure of the complete VUe-Router

[{path: '/user'.name: 'user-index'.component: () = > import('@/pages/user/index.vue'),
  meta: {$layout: { // Menu customization copywriting
      name: 'home'.icon: 'co-icon-home'.index: 0.disabled: true // Whether to display}}}]Copy the code

2.3 One to many menus

The one-to-one relationship between menus and routes is implemented through the meta field binding in the Router. This relationship between a menu and multiple routes is a common scenario. For example, when entering the details page from the list page, the routes change, but the system menu remains the same.

The one-to-many relationship between menus and routes is realized through nested routing and the one-to-one relationship extension of Route-mate.

Let’s start with the routing data structure:

[{path: 'basic'.name: 'infoList-basic'.component: () = > import('@/pages/infoList/basic.vue'),
     meta: {
        $layout: {    
          name: 'Basic list'.index: 2.registerMenu: { // Key identification fields for a one-to-many implementation
             defalut: 'index'}}},children: [{path: ' '.name: 'infoList-basic-index'.component: () = >import('@/pages/infoList/basic/index.vue'),
         meta: {},          
       },{
         path: 'hide'.name: 'infoList-basic-hide'.component: () = > import('@/pages/infoList/basic/hide.vue'),
         meta: {},}]}]Copy the code

By identifying the registerMenu field in route-meta, the entire nested route is identified as a menu. In this way, a menu corresponds to multiple sub-routes, thus realizing one-to-many relationship. The menu data can be extracted from the routing meta-information in Routes

Third, summary

Stereotypes about routing and vue single file extension component (route – meta) custom syntax, implement a set of menu, routing, and directory specification, in addition to saving the routing code, what is more important in this directory organization clearly and coding way, via the URL can locate directly to the page code, in the development to check the problem, And it becomes very simple.