Vue1与Vue2的Vue-router有什么区别，怎样解决兼容的问题？

Question

刚开始接触vue，在看某课上的仿饿了么教学，由于版本原因，出现了有很多的bug，在安装了Vue-router2.1.1
之后，在此文章（https://segmentfault.com/q/10...）的基础上修改了代码，编译不报错，但是浏览器一直不能显示页面，下面是代码的截图，烦请各位前辈劳心指教，感激不尽



main.js:
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

var goods = {template: '<div>goods</div>'}
var ratings = {template: '<div>ratings</div>'}
var seller = {template: '<div>seller</div>'}
var routes = [
{path: './seller', component: seller},
{path: './goods', component: goods},
{path: './ratings', component: ratings}
]
var router = new VueRouter({
routes: routes
})
new Vue({
router: router
}).$mount('#app')

App.vue:
<template>
<div>

<v-header></v-header>
  <div class = "tab">
  <div class = "tab-item">
    <a v-link="{path:'/goods'}">商品</a>
  </div>
  <div class = "tab-item">
    <a v-link="{path:'/ratings'}">评价</a>
  </div>
  <div class = "tab-item">
    <a v-link="{path:'/seller'}">商家</a>   
  </div> 
</div>
<router-view></router-view> 

</div>
</template>
<script>
import header from './components/header/header.vue'
export default {

components: {
  'v-header': header
}

}
import goods from './components/goods/goods.vue'
export default {

components: {
  'goods': goods
}

}
</script>
<style lang="stylus" rel="stylesheet/stylus">
.tab
display: flex
width: 100%
height: 40px
line-height:40px
.tab-item

flex: 1
text-align: center

</style>

Answer 1

官网有给出迁移方案。

Answer 2

你还是自己好好看文档，我也是反复看了三遍才写出来~~