Detailed explanation of how to create Vue-router sub-routes (nested routes)

In application interface development, it is usually composed of multiple layers of nested components. But as the number of pages increases, if you stuff all the pages into a routes array, it will look very messy, and you will not be able to determine which pages are related. With the help of vue-router, the nested routing function is provided, allowing us to organize related pages together. [Related recommendations: vue.js video tutorial]

Experimental purpose

In our mall project, the background management pageAdmin involves a lot Operation page, for example:

• /admin Main page
• /admin/create Create new information
• /admin/edit Edit information

Let’s organize them together by nested routing.

Create Admin page

Create Admin.vue under src/views, and create an admin directory to store admin's sub-pages (when using vue-router's sub-router, you need to add it to the parent page) Component uses router-view placeholder)

• Admin.vue

<template>
  <div class="title">
    <h1>{{ msg }}</h1>
    <!-- 路由插槽 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "home",

  data() {
    return {
      msg: "This is the Admin Page",
    };
  },
};
</script>

<style scoped>
</style>

Create sub-page

Create an admin directory under src/views to store admin subpages, and create Create.vue and Edit.vue under the admin directory to implement /create Create new products /editEdit product information

• Create.vue

<template>
  <div>
    <div class="title">
      <h1>This is Admin/Create</h1>
    </div>
  </div>
</template>

• Edit.vue

<template>
  <div>
    <div class="title">
      <h1>This is Admin/Edit</h1>
    </div>
  </div>
</template>

Modify router/index.js code

Add a sub-route. The sub-route is written by adding the children field to the original routing configuration.

children:[
    {path:'/',component:xxx},
    {path:'xx',component:xxx}]

Note: Do not add / to the path in children. Adding it means it is a route in the root directory.

• index.js

  import Vue from 'vue'import VueRouter from 'vue-router'import Admin from '@/views/Admin.vue'// 导入admin子路由import Create from '@/views/admin/Create';import Edit from '@/views/admin/Edit';Vue.use(VueRouter)const routes = [
    {
      path: '/admin',
      name: 'Admin',
      component: Admin,
      children: [
        {
          path: 'create',
          component: Create,
        },
        {
          path: 'edit',
          component: Edit,
        }
      ]
    }]const router = new VueRouter({
    routes})export default router

  Now the Vue-router sub-router (nested route) is created

  In application interface development, it is usually composed of multiple layers of nested components. But as the number of pages increases, if you stuff all the pages into a routes array, it will look very messy, and you will not be able to determine which pages are related. With the help of vue-router, the nested routing function is provided, allowing us to organize related pages together.

  The above is the detailed content of Detailed explanation of how to create Vue-router sub-routes (nested routes). For more information, please follow other related articles on the PHP Chinese website!