解決: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


---------------------?
轉自:https://blog.csdn.net/m0_37754657/article/details/71269988?
?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/448051.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/448051.shtml
英文地址,請注明出處:http://en.pswp.cn/news/448051.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

AMD Mantle再添新作,引發下代GPU架構猜想

摘要&#xff1a;今年秋天即將發布的《希德梅爾文明&#xff1a;太空》將全面支持AMD Mantle API&#xff0c;如此強大的功能背后離不開強大的CPU、GPU支持。上周AMD爆出了下一代海盜島R9 300系列&#xff0c;據網友猜測海盜島家族可能用上速度更快的HBM堆棧式內存。 小伙伴們…

不作35歲的程序員?

程序員三部曲--不作35歲的程序員?摩西2000 在中國&#xff0c;程序員不能超過35歲&#xff0c;似乎已經是不爭的事實&#xff0c;軟件開發工作就是青春飯&#xff0c;頂多靠畢業這十年的時間&#xff0c;超過這個年齡&#xff0c;要不成功躍身成為管理者&#xff0c;要不轉…

linux下使用TC模擬弱網絡環境

linux下使用TC模擬弱網絡環境 模擬延遲傳輸簡介 netem 與 tc: netem 是 Linux 2.6 及以上內核版本提供的一個網絡模擬功能模塊。該功能模塊可以用來在性能良好的局域網中,模擬出復雜的互聯網傳輸性能,諸如低帶寬、傳輸延遲、丟包等等情 況。使用 Linux 2.6 (或以上) 版本內核…

CDN 是什么 、CDN 引入

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 CDN 的全稱是 Content Delivery Network&#xff0c;即內容分發網絡。 CDN的基本原理是廣泛采用各種緩存服務器&#xff0c;將這些緩存…

長壽的人會有的8個健康理念

長壽的人會有的8個健康理念。年輕的時候總是在揮霍身體健康&#xff0c;吸煙、喝酒沒有節制&#xff0c;到老了之后身體會出現各種問題。老年人如果想要身體健康、長壽的話&#xff0c;就要從日常生活習慣做起。下面小編就來介紹長壽的人會有的8個健康理念&#xff1a; 1、少…

Ubuntu下selenium+Chrome的安裝使用

Ubuntu下seleniumChrome的安裝使用 安裝 chrome 官網下載安裝包 sudo dpkg -i google-chrome-stable_current_amd64.deb whereis google-chrome 安裝selenium pip3 install selenium 下載chromedriver(火狐使用geckodriver)驅動 http://npm.taobao.org/mirrors/chromed…

shoot for用法

Look, there are people like Ross who need to shoot for the stars, with his museum, and his papers getting published.---《老友記》 而像羅斯這種人則追求卓越&#xff0c;博物館&#xff0c;發表論文。 爭取;為...而努力Were shooting this year for a 50% increase in…

VUE : 雙重 for 循環寫法、table 解析任意 list 、萬能表格組件、解析一維數組、動態生成 table 所有數據

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 1.需求&#xff1a; 我想要一個 table 組件能在實際調用時動態生成所有的 tr 、td 。 后端返回的只是一個 list &#xff0c; 前端頁…

安全離職妙招

高招的離職&#xff0c;不但有可能讓前老板幫你說好話&#xff0c;讓前同事成為你的啦啦隊&#xff0c;未來若有好機會&#xff0c;還會想到你&#xff0c;只要你學會克服離職流程中的五個尷尬情境。 情境一、離職怎么提&#xff1f; 口頭請辭&#xff0c;最先告知上司。 有…

字節內推~

大佬們有興趣來字節約飯么&#xff0c;下面是內推鏈接~ 社招內推鏈接&#xff1a;https://job.toutiao.com/s/LwpKWU8 校招內推鏈接&#xff1a;https://job.toutiao.com/s/LwsFw6g

使用編輯工具快速創建實體對象的方法

快速創建java類 (\w)\s(.) /** $2 */\nprivate String $1; search Mode 為 Reqular expression 轉載于:https://www.cnblogs.com/otways/p/11283303.html

超詳細 圖解 : IntelliJ IDEA 逆向生成 JAVA 實體類

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 1.配置數據庫,&#xff0c;這里連接的是mysql。 2.填寫 連接數據庫的信息&#xff0c;填寫完成后可以點擊Test Connection,測試一下是否…

用面粉和醋洗頭 讓你的頭發黑亮又濃密

用面粉和醋洗頭發&#xff0c;別看這些最廉價、最普通的東西&#xff0c;卻能帶來意想不到的效果。調配這種洗頭液很簡單&#xff0c;取50&#xff5e;100克面粉&#xff0c;加入少許涼水調成稀面糊&#xff0c;倒入沸水中煮開&#xff0c;然后加入25&#xff5e;50克醋&#x…

leetcode練習——數組篇(1)(std::ios::sync_with_stdio(false);std::cin.tie(nullptr);)

題號1. 兩數之和&#xff1a; 給定一個整數數組 nums 和一個目標值 target&#xff0c;請你在該數組中找出和為目標值的那 兩個 整數&#xff0c;并返回他們的數組下標。 你可以假設每種輸入只會對應一個答案。但是&#xff0c;你不能重復利用這個數組中同樣的元素。 示例: …

intellij idea 中去除 @Autowired 注入對象帶來的紅色下劃線報錯提示

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 PS&#xff1a; 有 2 種方法&#xff0c;第 2 種方法更簡單&#xff0c;在此謝謝好心友人的評論。 方法1&#xff1a; idea中通過Autow…

根據目標選擇減肥方法 少做無用功

不同的美體目標適合的減肥方法也是不同的&#xff0c;有些人想減去大部分體重&#xff0c;而有些人只是想讓身體曲線更柔美&#xff0c;這就要求有相應的減肥方法&#xff0c;對癥下藥&#xff0c;才會讓減肥少做無用功。 目標&#xff1a;我想穿上小一碼的衣服 建議&#x…

Coolite動態加載CheckboxGroup,無法在后臺中獲取

Coolite在后臺動態加載CheckboxGroup&#xff0c;頁面顯示都正常&#xff0c;但是在后臺去獲取選中的checkbox時&#xff0c;使用下方法&#xff1a; ///<summary>///獲取所選權限 ///</summary>///<returns></returns>privatestringGetPermiss…

基于java的數據結構學習——動態數組C++類模板(含拷貝構造,重載常見運算符)

之前實現了java的動態數組&#xff0c;試著寫了個C版的&#xff0c;同樣對時間復雜度振蕩進行了處理。純手打&#xff0c;代碼如下 &#xff1a; // // Created by PC-Saw on 2018/12/19. //#ifndef DATA_STRUCTURE_MYARRAY_H #define DATA_STRUCTURE_MYARRAY_H#include <i…

科目三考試過程詳解

科目三是考駕照的最后一項考試&#xff0c;所以考生在這關都很注意&#xff0c;但是有可能是由于過于緊張都難免會有些失誤&#xff0c;如果沒過的話&#xff0c;那也就意味著您拿照的時間又延長了另外還要交補考費。因此很多學員都想一次性把這項考試通過&#xff0c;那么我們…

圖解 IDEA 中 springboot 項目 MyBatis Generator 逆向生成實體類及 mapper 配置文件

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 一、準備工作&#xff1a; 1. 新建一個 配置文件&#xff1a;generatorConfig.xml 。 <?xml version"1.0" encoding&qu…