Vue router-link does not display

problem description

the route is defined using vue-router, but when using the router-link tag, the page does not display the tag

the environmental background of the problems and what methods you have tried

The

to attribute is changed to: to= {path:"/path"}. The tag can be displayed, but it is not rendered as a normal link

.

related codes

/ / Please paste the code text below (do not replace the code with pictures)
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"
})

Page: 

<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="-sharp">
          <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="-sharp"><i class="fa fa-exchange"></i> <span></span></a></li>
        ......

display effect:

clipboard.png

can see that one label is missing

what result do you expect? What is the error message actually seen?

console error: 

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-sharpDeclaring-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)
Vue-router
Apr.07,2021 
<router-link :to="{ name: 'events' }">

try this

has the problem been solved?

Previous: When MySQL stores currency fields with precision to points, do you use int or decimal

Next: On the call of toString and valueOf of js

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b31cee-2bdcb.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b31cee-2bdcb.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?