Vue路由实现效果一：根据点击左栏链接切换右栏显示

实现结果：

实现方法：
main.vue：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$router.push("/left/right1");
  },
};
</script>

index.vue：

<template>
  <div>
    <div class="top">这是顶栏</div>
    <div class="left">
      <div class="leftHead">
        <h1>这是左栏</h1>
      </div>
      <div class="leftBody">
        <h2>这是链接展示的位置</h2>
        <router-link to="/left/right1">显示栏目1</router-link>
        <div class="seperate"></div>
        <router-link to="/left/right2">显示栏目2</router-link>
        <div class="seperate"></div>
        <router-link to="/left/right3">显示栏目3</router-link>
      </div>
    </div>
    <div class="right">
      <div class="rightHead">
        <h1>这是右栏</h1>
      </div>
      <div class="rightBody">
        <div class="leftBody">
          <h2>这是展示内容的位置</h2>
          <router-view />
          <router-view name="right" />
        </div>
      </div>
    </div>
  </div>
</template>

right.vue：

<template>
  <div>这是右栏的默认内容</div>
</template>

right1.vue：

<template>
  <div>这是右栏的内容1</div>
</template>

right2.vue：

<template>
  <div>这是右栏的内容2</div>
</template>

router.js：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

import RightDefault from "./components/right.vue"
import Right1 from "./components/right1.vue"
import Right2 from "./components/right2.vue"
import Index from "./components/index.vue"

const router = new Router({
    routes: [
        {
            path:"/left",
            component:Index,
            children:[
                {
                    path:'right1',
                    components:{
                        default:RightDefault,
                        right:Right1
                    }
                },
                {
                    path:'right2',
                    components:{
                        default:RightDefault,
                        right:Right2
                    }
                },
                {
                    path:'right3',
                    component:RightDefault,
                }
            ]
        }
    ]
})

export default router