Cannot read property 'component' of undefined 即vue-router 0.x轉化爲2.x

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中

        <a v-link="{path:'/goods'}"></a>

改爲 <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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章