鍍金池/ 問答/HTML/ vue router-link 不顯示

vue router-link 不顯示

問題描述

使用vue-router定義好了路由，但是在使用router-link標簽是，頁面不顯示該標簽

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

to屬性里改成 :to={path:'/path'} 這種形式，標簽可以顯示，但是未被渲染成正常鏈接

相關(guān)代碼

// 請把代碼文本粘貼到下方（請勿用圖片代替代碼）
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>
        ......

顯示效果：

clipboard.png

能看出來，少顯示一個標簽

你期待的結(jié)果是什么？實際看到的錯誤信息又是什么？

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)
回答
編輯回答
冷眸
<router-link :to="{ name: 'events' }">

試試這樣

2017年4月30日 02:22