The application interface in real life is usually composed of multiple nested components. Similarly, each dynamic path in the URL corresponds to the nested components in a certain structure. With the help of Vue router, this relationship can be expressed simply by using nested routing configuration.

This document should be viewed first“ Vue-router HelloWorld Document.

Create two new pages of Hi1 and Hi2

In the src/components directory, create the Hi1.vue and Hi2.vue files.

<template>
  <div>
    <h2>{{message}}</h2>
  </div>
</template>
<script>
export default {
  name: "Hi",
  data() {
    return {
      message : 'Wo Shi Hi1!'
    };
  }
};
</script>
<style scoped>

</style>

<template>
  <div>
    <h2>{{message}}</h2>
  </div>
</template>
<script>
export default {
  name: "Hi",
  data() {
    return {
      message : 'Wo Shi Hi2!'
    };
  }
};
</script>
<style scoped>

</style>

Modify Hi.vue page

Modify the Hi.vue file in the src/components directory.

<template>
  <div>
    <h2>{{message}}</h2>
    <!-- Add routing -->
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "Hi",
  data() {
    return {
      message : 'Wo Shi Hi!'
    };
  }
};
</script>
<style scoped>

</style>

Modifying the navigation code of App.vue

Modify the navigation code of app.vue, add two new navigation links with < router link > tag, and add Hi1 and Hi2 navigation.

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- Navigation -->
    <div>
      <router-link to="/">Hello</router-link>|
      <router-link to="/Hi">Hi</router-link>|
      <router-link to="/Hi/Hi1">Hi1</router-link>|
      <router-link to="/Hi/Hi2">Hi2</router-link>
    </div>
    <router-view/>
  </div>
</template>

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

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Modify router/index.js code

Modify the router/index.js code to add sub routes. The sub route is written by adding the children field under the original route configuration.

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

All codes of index.js are:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// Introducing Hi
import Hi from '@/components/Hi'
// Introducing Hi1
import Hi1 from '@/components/Hi1'
// Introducing Hi2
import Hi2 from '@/components/Hi2'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    // Configure Hi objects
    {
      path: '/Hi',
      name: 'Hi',
      component: Hi,
      //Lead router
      children:[
        {path:'/',component:Hi},
        {path:'Hi1',component:Hi1},
        {path:'Hi2',component:Hi2},
      ]
    }
  ]
})

After the above adjustments are completed, we can start the service and enter the following information in the browser to see if it is successful:

Click Hi1

Click Hi2

Through page view, we can see the pages of Hi1 and Hi2, including not only the content of our own page, but also the content of hi page, indicating that our sub route configuration is successful