vue使用router-link总是报错提示未注册

Question

使用vue-cli脚手架搭建的环境，使用router-link总是提示未注册，在组件内部再引入一次vue-router则不报错，为什么呢？

路由文件已经引入了vue-router

import Vue from 'vue'
import Router from 'vue-router'
import HeaderTop from '@/components/header'
import Hello from '@/page/home/Hello'
import Firststep from '@/page/firststep/firststep'
import Secondstep from '@/page/secondstep/secondstep'
import Threestep from '@/page/threestep/threestep'
import Fourstep from '@/page/fourstep/fourstep'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/header',
      name: 'HeaderTop',
      component: HeaderTop
    },
    {
      path: '/',
      name: 'Hello',
      component: Hello,
      children: [
        {
          path: '/firststep',
          name: 'Firststep',
          component: Firststep
        },
        {
          path: '/secondstep',
          name: 'Secondstep',
          component: Secondstep
        },
        {
          path: '/threestep',
          name: 'Threestep',
          component: Threestep
        },
        {
          path: '/fourstep',
          name: 'Fourstep',
          component: Fourstep
        }
      ]
    }
  ]
})

但是组件内部还要再引入一次，才能生效，以下代码，感觉script里边前三行应该是不用写的，但是现在情况是不写总是提示router-link未注册：

<template>
  <div class="header">
    <ul>
        <li v-for="item in headerlist">
            <router-link :to="{ path: item.path }" >{{item.title}}</router-link>
        </li>
    </ul>
  </div>
</template>

<script>
  /*查找为什么单个组件需要引入router，router-link才能生效*/
  import Vue from 'vue'
  import Router from 'vue-router'
  Vue.use(Router)
  export default {
    name: 'HeaderTop',
    data(){
      return {
        headerlist: [{
            path: '/firststep',
            title: '第一步'
          },
          {
            path: '/secondstep',
            title: '第二步'
          },
          {
            path: '/threestep',
            title: '第三步'
          },
          {
            path: '/fourstep',
            title: '第四步'
          }]
      }
    },
    components:{
    }
  }
</script>

在main.js里边已经挂载了router

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

Answer 1

new Vue({
    router,
    render: (h) => h(app)
}).$mount('#app')

试试

Answer 2

楼主，这个问题您是怎么解决的呢？我今天也遇到了，跪求答案，谢谢了。