vue router-link 不显示

Question

问题描述

使用vue-router定义好了路由，但是在使用router-link标签是，页面不显示该标签

问题出现的环境背景及自己尝试过哪些方法

to属性里改成 :to={path:'/path'} 这种形式，标签可以显示，但是未被渲染成正常链接

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
index.js

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import App from '../App'
// import Index from '@/components/Index'
import events from '../components/events/events'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/index',
      name: 'index',
      component: App
    },
    {
      path: '/events',
      name: 'events',
      component: events
    }
  ],
  mode:'history'
})

页面：

<ul class="sidebar-menu" data-widget="tree">
        <li class="header">HEADER</li>
        <!-- Optionally, you can add icons to the links -->
        <li class="active"><a href="#">
          <i class="fa fa-dashboard"></i> <span>首页</span></a>
        </li>
        <li><router-link to='events'>
          <i class="fa fa-circle"></i> <span>事件管理</span></router-link>
        </li>
        <li><a>
          <i class="fa fa-flag-o"></i> <span>问题管理</span></a>
        </li>
        <li><a href="#"><i class="fa fa-exchange"></i> <span>变更管理</span></a></li>
        ......

显示效果：

能看出来，少显示一个标签

你期待的结果是什么？实际看到的错误信息又是什么？

console报错：

vue.esm.js?efeb:591 [Vue warn]: Property or method "events" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Sidebar> at src\components\Sidebar.vue
       <App> at src\App.vue
         <Root>
warn @ vue.esm.js?efeb:591
warnNonPresent @ vue.esm.js?efeb:1899
get @ vue.esm.js?efeb:1941
render @ Sidebar.vue?179e:22
Vue._render @ vue.esm.js?efeb:4544
updateComponent @ vue.esm.js?efeb:2788
get @ vue.esm.js?efeb:3142
Watcher @ vue.esm.js?efeb:3131
mountComponent @ vue.esm.js?efeb:2795
Vue.$mount @ vue.esm.js?efeb:8540
Vue.$mount @ vue.esm.js?efeb:10939
init @ vue.esm.js?efeb:4137
createComponent @ vue.esm.js?efeb:5608
createElm @ vue.esm.js?efeb:5555
createChildren @ vue.esm.js?efeb:5682
createElm @ vue.esm.js?efeb:5584
patch @ vue.esm.js?efeb:6091
Vue._update @ vue.esm.js?efeb:2660
updateComponent @ vue.esm.js?efeb:2788
get @ vue.esm.js?efeb:3142
Watcher @ vue.esm.js?efeb:3131
mountComponent @ vue.esm.js?efeb:2795
Vue.$mount @ vue.esm.js?efeb:8540
Vue.$mount @ vue.esm.js?efeb:10939
init @ vue.esm.js?efeb:4137
createComponent @ vue.esm.js?efeb:5608
createElm @ vue.esm.js?efeb:5555
patch @ vue.esm.js?efeb:6130
Vue._update @ vue.esm.js?efeb:2660
updateComponent @ vue.esm.js?efeb:2788
get @ vue.esm.js?efeb:3142
Watcher @ vue.esm.js?efeb:3131
mountComponent @ vue.esm.js?efeb:2795
Vue.$mount @ vue.esm.js?efeb:8540
Vue.$mount @ vue.esm.js?efeb:10939
Vue._init @ vue.esm.js?efeb:4640
Vue @ vue.esm.js?efeb:4729
(anonymous) @ main.js?1c90:20
./src/main.js @ app.js:2002
__webpack_require__ @ app.js:679
fn @ app.js:89
0 @ app.js:2019
__webpack_require__ @ app.js:679
(anonymous) @ app.js:725
(anonymous) @ app.js:728
vue.esm.js?efeb:591 [Vue warn]: Invalid prop: type check failed for prop "to". Expected String, Object, got Undefined.

found in

---> <RouterLink>
       <Sidebar> at src\components\Sidebar.vue
         <App> at src\App.vue
           <Root>
warn @ vue.esm.js?efeb:591
assertProp @ vue.esm.js?efeb:1632
validateProp @ vue.esm.js?efeb:1560
loop @ vue.esm.js?efeb:3334
initProps @ vue.esm.js?efeb:3367
initState @ vue.esm.js?efeb:3308
Vue._init @ vue.esm.js?efeb:4628
VueComponent @ vue.esm.js?efeb:4798
createComponentInstanceForVnode @ vue.esm.js?efeb:4310
init @ vue.esm.js?efeb:4131
createComponent @ vue.esm.js?efeb:5608
createElm @ vue.esm.js?efeb:5555
createChildren @ vue.esm.js?efeb:5682
createElm @ vue.esm.js?efeb:5584
createChildren @ vue.esm.js?efeb:5682
createElm @ vue.esm.js?efeb:5584
createChildren @ vue.esm.js?efeb:5682
createElm @ vue.esm.js?efeb:5584
createChildren @ vue.esm.js?efeb:5682
createElm @ vue.esm.js?efeb:5584
patch @ vue.esm.js?efeb:6091
Vue._update @ vue.esm.js?efeb:2660
updateComponent @ vue.esm.js?efeb:2788
get @ vue.esm.js?efeb:3142
Watcher @ vue.esm.js?efeb:3131
mountComponent @ vue.esm.js?efeb:2795
Vue.$mount @ vue.esm.js?efeb:8540
Vue.$mount @ vue.esm.js?efeb:10939
init @ vue.esm.js?efeb:4137
createComponent @ vue.esm.js?efeb:5608
createElm @ vue.esm.js?efeb:5555
createChildren @ vue.esm.js?efeb:5682
createElm @ vue.esm.js?efeb:5584
patch @ vue.esm.js?efeb:6091
Vue._update @ vue.esm.js?efeb:2660
updateComponent @ vue.esm.js?efeb:2788
get @ vue.esm.js?efeb:3142
Watcher @ vue.esm.js?efeb:3131
mountComponent @ vue.esm.js?efeb:2795
Vue.$mount @ vue.esm.js?efeb:8540
Vue.$mount @ vue.esm.js?efeb:10939
init @ vue.esm.js?efeb:4137
createComponent @ vue.esm.js?efeb:5608
createElm @ vue.esm.js?efeb:5555
patch @ vue.esm.js?efeb:6130
Vue._update @ vue.esm.js?efeb:2660
updateComponent @ vue.esm.js?efeb:2788
get @ vue.esm.js?efeb:3142
Watcher @ vue.esm.js?efeb:3131
mountComponent @ vue.esm.js?efeb:2795
Vue.$mount @ vue.esm.js?efeb:8540
Vue.$mount @ vue.esm.js?efeb:10939
Vue._init @ vue.esm.js?efeb:4640
Vue @ vue.esm.js?efeb:4729
(anonymous) @ main.js?1c90:20
./src/main.js @ app.js:2002
__webpack_require__ @ app.js:679
fn @ app.js:89
0 @ app.js:2019
__webpack_require__ @ app.js:679
(anonymous) @ app.js:725
(anonymous) @ app.js:728
vue.esm.js?efeb:591 [Vue warn]: Error in render: "TypeError: Cannot read property 'resolve' of undefined"

found in

---> <RouterLink>
       <Sidebar> at src\components\Sidebar.vue
         <App> at src\App.vue
           <Root>
warn @ vue.esm.js?efeb:591
logError @ vue.esm.js?efeb:1737
globalHandleError @ vue.esm.js?efeb:1732
handleError @ vue.esm.js?efeb:1721
Vue._render @ vue.esm.js?efeb:4546
updateComponent @ vue.esm.js?efeb:2788
get @ vue.esm.js?efeb:3142
Watcher @ vue.esm.js?efeb:3131
mountComponent @ vue.esm.js?efeb:2795
Vue.$mount @ vue.esm.js?efeb:8540
Vue.$mount @ vue.esm.js?efeb:10939
init @ vue.esm.js?efeb:4137
createComponent @ vue.esm.js?efeb:5608
createElm @ vue.esm.js?efeb:5555
createChildren @ vue.esm.js?efeb:5682
createElm @ vue.esm.js?efeb:5584
createChildren @ vue.esm.js?efeb:5682
createElm @ vue.esm.js?efeb:5584
createChildren @ vue.esm.js?efeb:5682
createElm @ vue.esm.js?efeb:5584
createChildren @ vue.esm.js?efeb:5682
createElm @ vue.esm.js?efeb:5584
patch @ vue.esm.js?efeb:6091
Vue._update @ vue.esm.js?efeb:2660
updateComponent @ vue.esm.js?efeb:2788
get @ vue.esm.js?efeb:3142
Watcher @ vue.esm.js?efeb:3131
mountComponent @ vue.esm.js?efeb:2795
Vue.$mount @ vue.esm.js?efeb:8540
Vue.$mount @ vue.esm.js?efeb:10939
init @ vue.esm.js?efeb:4137
createComponent @ vue.esm.js?efeb:5608
createElm @ vue.esm.js?efeb:5555
createChildren @ vue.esm.js?efeb:5682
createElm @ vue.esm.js?efeb:5584
patch @ vue.esm.js?efeb:6091
Vue._update @ vue.esm.js?efeb:2660
updateComponent @ vue.esm.js?efeb:2788
get @ vue.esm.js?efeb:3142
Watcher @ vue.esm.js?efeb:3131
mountComponent @ vue.esm.js?efeb:2795
Vue.$mount @ vue.esm.js?efeb:8540
Vue.$mount @ vue.esm.js?efeb:10939
init @ vue.esm.js?efeb:4137
createComponent @ vue.esm.js?efeb:5608
createElm @ vue.esm.js?efeb:5555
patch @ vue.esm.js?efeb:6130
Vue._update @ vue.esm.js?efeb:2660
updateComponent @ vue.esm.js?efeb:2788
get @ vue.esm.js?efeb:3142
Watcher @ vue.esm.js?efeb:3131
mountComponent @ vue.esm.js?efeb:2795
Vue.$mount @ vue.esm.js?efeb:8540
Vue.$mount @ vue.esm.js?efeb:10939
Vue._init @ vue.esm.js?efeb:4640
Vue @ vue.esm.js?efeb:4729
(anonymous) @ main.js?1c90:20
./src/main.js @ app.js:2002
__webpack_require__ @ app.js:679
fn @ app.js:89
0 @ app.js:2019
__webpack_require__ @ app.js:679
(anonymous) @ app.js:725
(anonymous) @ app.js:728
vue.esm.js?efeb:1741 TypeError: Cannot read property 'resolve' of undefined
    at Proxy.render (vue-router.esm.js?fe87:409)
    at VueComponent.Vue._render (vue.esm.js?efeb:4544)
    at VueComponent.updateComponent (vue.esm.js?efeb:2788)
    at Watcher.get (vue.esm.js?efeb:3142)
    at new Watcher (vue.esm.js?efeb:3131)
    at mountComponent (vue.esm.js?efeb:2795)
    at VueComponent.Vue.$mount (vue.esm.js?efeb:8540)
    at VueComponent.Vue.$mount (vue.esm.js?efeb:10939)
    at init (vue.esm.js?efeb:4137)
    at createComponent (vue.esm.js?efeb:5608)

Answer 1

<router-link :to="{ name: 'events' }"> 

试试这样

Answer 2

请问问题解决了吗？