解决：Cannot read property ‘component‘ of undefined （即 vue-router 0.x 转化为 2.x）

分手后的思念是犯贱 2022-03-30 20:30 326阅读 0赞

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1]

vue项目原本是用0.x版本的vue-router，但是去报出：Cannot read property 'component' of undefined

这是因为版本问题，由于vue2删除了vue1的内部指令，而vue－router1.x依赖vue的一个内部指令

研究了下vue-router官网，小白我用了接近一天来解决问题，最后我将vue-router改为2.2.0版本

1.打开package.json  将"dependencies"中的   "vue-router"版本改为："^2.2.0"

2.执行：

npm install

3.在App.vue中

改为 <router-link to="/goods">商品</router-link>

4.然后在main.js中（我的main.js是这样的【2.2.0版本】）

import Vue from 'vue';  
import VueRouter from 'vue-router';  
import App from './App';  
import goods from './components/goods/goods';  
import seller from './components/seller/seller';  
import ratings from './components/ratings/ratings';

//使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)  
Vue.use(VueRouter);

//定义路由  
var routes=\[  
\{path:'/',redirect: '/goods'\},   
\{path:'/goods',component:goods\},  
\{path:'/ratings',component:ratings\},  
\{path:'/seller',component:seller\}  
\]

//创建 router 实例，然后传 \`routes\` 配置  
var router=new VueRouter(\{  
linkActiveClass: 'active',  
  routes  
\});  
//=> 是ES6的箭头语法  
new Vue(\{  
el:'\#app',  
router,  
render:h=>h(App)  
\})

vue-router官网：https://router.vuejs.org

\---------------------   
转自：https://blog.csdn.net/m0\_37754657/article/details/71269988

[Link 1]: https://www.captainai.net/jiangyu1013/