创建elementstater后，安装vue-router,页面出不来，怎么回事？谢谢各位

1、我使用了hbuilderx新建了一个普通项目，选择了elemet-starter
2、我在项目下面安装了vue-router
3、我再src创建了router文件夹，下面放了index.js，代码为

import App from '../APP'  
import radio from '../page/radio'  

export default[  
 {path:'/',component:App},  
 {path:'/radio',component:radio},  
    {path:"*", redirect:App}  
]  

4、我page下面的radio的代码为

<template>  
     <div>  
         <el-radio v-model="radio" label="1">备选项</el-radio>  
          <el-radio v-model="radio" label="2">备选项</el-radio>  
     </div>  
</template>  

<script>  
    export default{  
        data(){  
            return{  
                radio:1  
            }  
        }  
    }  
</script>  

<style>  
</style>  

5、我的APP.Vue的代码为

<template>  
  <div id="app">  
    <div>  
      <el-button @click="startHacking">Start</el-button>  
    </div>  
    <div>  
        <el-link href="/radio" type="success">radio</el-link>  
    </div>  
  </div>  

</template>  

<script>  
export default {  

  methods: {  
    startHacking () {  
      this.$notify({  
        title: 'It works!',  
        type: 'success',  
        message: 'We\'ve laid the ground work for you. It\'s time for you to build something epic!',  
        duration: 5000  
      })  
    },  
    tiaozhuan(url){  
      this.$router.push(url);  
    },  
  }  
}  
</script>  

<style>  
#app {  
  font-family: Helvetica, sans-serif;  
  text-align: center;  
}  
</style>

6、main.js的代码为

import Vue from 'vue'  
import ElementUI from 'element-ui'  
import 'element-ui/lib/theme-chalk/index.css'  
import App from './App.vue'  
import VueRouter from 'vue-router'  
import routes from './router/index'  
Vue.use(ElementUI)  
Vue.use(VueRouter)  

//创建路由实例  
var router=new VueRouter({  
    routes:routes  
})  

new Vue({  
  el: '#app',  
 router,  
  render: h => h(App),  
})

然后我运行后，只有APP.vue页面出现，我想点击跳转到radio页面，就是跳不过去，请问大神，到底是哪里写错了，小弟刚学，万分感谢了。