组件里使用router-link报错,需要给组件再引入一次router,就不报错了,为什么呢?
发布于 7 年前 作者 awtmeng 5203 次浏览 最后一次编辑是 7 年前 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

使用vue-cli自动搭建的,组件里使用router-link报错,说router-link没有被注册,需要给组件再引入一次router,就不报错了,为什么呢? 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 } })

router>index.js内容如下: 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 } ] } ] })

使用router-link的组件如下: <template>

  • <router-link :to="{ path: item.path }" >{{item.title}}</router-link>
</template> <script> /*查找为什么单个组件需要引入router,router-link才能生效*/ import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) /*感觉这里应该不需要再引入一次router*/ export default { name: 'HeaderTop', data(){ return { headerlist: [{ path: '/firststep', title: '第一步' }, { path: '/secondstep', title: '第二步' }, { path: '/threestep', title: '第三步' }, { path: '/fourstep', title: '第四步' }] } }, components:{ } } </script>
回到顶部