vue路由配置搭建 代码没有抛错 但是没有实现跳转效果

Vuerouter踩坑

没有报错，但是不能进行路由跳转

这是文件框架–要实现的是主页的home和about的爱会跳转

这是about.vue的代码

<template>
     <div>
        <h2>我是关于</h2>
        <p>我是关于内容 嘿嘿嘿</p>
    </div>
</template>
<script>
export default {
    
}
</script>
<style scoped>
</style>

这是Home.vue代码

<template>
    <div>
        <h2>我是首页</h2>
        <p>我是首页内容，哈哈哈</p>
    </div>
</template>
<script>
export default { 
}
</script>
<style scoped>
</style>

这是Index.js代码

import Vue from 'vue'
import VueRouter from 'vue-router'

import About from '../components/About'
import Home from '../components/Home'

//通过vue。use(插件),安装插件
Vue.use(VueRouter)

//创建vuerouter对象
const routers = [
  {
    path:'',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]
const router = new VueRouter({
  //配置路由和组件之间的应用关系
  routers,
  mode: 'history'
})
export default router

这是App.vue代码

<template >
  <div id="app">
<h2>我只组件App</h2>
    <router-link to="/home"><button @click="homeClick">首页</button></router-link>
    <router-link to="/about"><button @click="aboutClick">关于</button></router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App',
  component: {
  },
  methods: {
    homeClick(){
      this.$router.push('/home')
      console.log('homeClick');   
    },
    aboutClick(){
      this.$router.push('/home')
      console.log('aboutClick');
    }
  }
}
</script>
<style>
</style>

好了，问题来了，浏览器打开控制台并没有报错，但是点击按钮，路由跳转了，可about和home里面的代码并没有渲染到界面中

发现问题所在

index.js里面配置路由的时候，一定记住。这里固定写的是routes