你知不知之vue路由知多少router-link

实现的需求如下（这里只是做简单操作，根据实际情况进行修改）：

父组件：HelloFather.vue 不过多阐述样式，这里就是路由跳转和显示

<template>
  <div class="navbar">
    <router-link to="/HelloSon">一号链接</router-link>
    <router-link to="/UserHome">二号链接</router-link>
    <!-- 路由匹配到的组件将显示在这里，这里要显示子级的内容哦 -->
    <router-view></router-view>
  </div>
</template>

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

<style scoped></style>

一号链接子组件 HelloSon.vue（一号链接里面还套了一层子组件，等于是爸爸的儿子的儿子）

<template>
  <div class="navbar">
    <h2>你好，我是一号链接HelloSon</h2>
    <router-link to="/HelloSon2">一号链接HelloSon的子级</router-link>
    <router-view></router-view>
  </div>
</template>

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

<style scoped></style>

二号链接 UserHome.vue

<template>
  <div>你好，我是UserHome</div>
</template>

<script>
export default {
    
    
}
</script>

<style></style>

一号链接的儿子 HelloSon2.vue

<template>
  <div>
    <h2>我是HelloSon下面的子级HelloSon2呀</h2>
  </div>
</template>

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

<style></style>

路由router 下的index.js如何配置

首先初始的第一层应该是这么写的
import Vue from 'vue'
import Router from 'vue-router'
import HelloFather from '@/components/HelloFather'
import HelloSon from '@/components/HelloSon'
import HelloSon2 from '@/components/HelloSon2'
import UserHome from '@/components/UserHome'
import Enterprise from '@/components/Enterprise'

Vue.use(Router)

export default new Router({
    
    
  routes: [
    {
    
    
    // 默认一进来就是HelloWorld页面
      path: '/',
      name: 'HelloFather',
      component: HelloFather,
      children: [
        {
    
     path: '/UserHome', component: UserHome },
        {
    
    
          path: '/HelloSon',
          component: HelloSon,
          children: [
            {
    
     path: '/HelloSon2', component: HelloSon2 }
          ]
        }
      ]
    },
    {
    
    
      //这个目前没有做展示
      path: '/Enterprise',
      name: 'Enterprise',
      component: Enterprise
    }
  ]
})

路由跳转 this.$router.push("/");