Implementation of nested jump of vue routing view router-view

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
  }
}
</script>

<style>
</style>

<template>
  <div id="login">
    <el-form>
      <el-row :gutter="20">
        <el-col class="title" :offset="9" :span="6">
          <h1>A login page</h1>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col class="col-label" :offset="7" :span="4">
          <span class="label">Account:</span>
        </el-col>
        <el-col :span="4">
          <el-input type="text" placeholder="Please enter your account number" v-model="account.username"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col class="col-label" :offset="7" :span="4">
          <span class="label">Password:</span>
        </el-col>
        <el-col :span="4">
          <el-input type="password" placeholder="Please enter your password" v-model="account.password"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :offset="8" :span="8">
          <span>
            <a href="#" rel="external nofollow" rel="external nofollow" @click="register" >Register account</a>
            /
            <a href="#" rel="external nofollow" rel="external nofollow" @click="resetPwd" >Reset password</a>
          </span>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :offset="10" :span="4">
          <el-button type="primary" round @click="onSubmit">Login</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'login',
  data() {
    return {
      account:
        username: '',
        password: ''
      }
    }
  },
  methods: {
    register() {
      this.$message({
        message: 'It seems that there is no such function',
        type: 'info'
      })
    },
    resetPwd() {
      this.$message({
        message: 'Next life',
        type: 'success'
      })
    },
    onSubmit() {
      this.$router.push('/index')
    }
  }
}
</script>

<style scoped>
  #login {
    text-align: center;
    margin: 0 auto;
  }
  .label {
    height: 40px;
    line-height: 40px;
  }
  .col-label {
    text-align: right;
  }
  .el-row {
    margin-top: 15px;
  }
  .el-button {
    width: 120px;
  }
  .title {
    margin-top: 10%;
  }
</style>

View Code

{
      path: '/',
      name: 'login',
      component: () => import('../views/login/login.vue')
},

<template>
  <el-container style="border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1']" :router="true">
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-message"></i>Navigation 1</template>
          <el-menu-item-group>
            <template slot="title">Group 1</template>
            <el-menu-item index="1-1">Option 1</el-menu-item>
            <el-menu-item index="1-2">Option 2</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container class="table-div">
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>View</el-dropdown-item>
            <el-dropdown-item>New</el-dropdown-item>
            <el-dropdown-item>Delete</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>Wang Xiaohu</span>
      </el-header>

      <el-main>
        <table></table>
      </el-main>
    </el-container>
  </el-container>
</template>

<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

<script>
export default {
  name: 'index',
  data() {
  }
}
</script>

<style>
  .table-div {
    width: 100%;
  }
  .el-table {
    height: 100%;
  }
</style>

{
      path: '/index',
      name: 'index',
      component: () => import('@/components/index')
}

{
      path: '/index',
      name: 'index',
      component: () => import('@/components/index'), // Configure the page component for the default route jump of the home page here children: [ // Add child routes {
          path: 'page', // Note: Do not put a / in front of the path, otherwise it will not jump, I have suffered a loss here name: 'page',
          components: { // Note that the parameter name has s
            table: () => import('@/components/first-page') // The table here must be the same as the name of the router-view tag on the home page, so that the routing view on the home page will jump, see 3.2
          }
        },
        {
          path: 'table',
          name: 'table',
          components:
            table: () => import('@/components/first-table')
          }
        }
      ]
}