10 Vue路由、http請(qǐng)求、跨域請(qǐng)求fetch/axios/proxy

1、Vue路由的使用 ->?頁面之間跳轉(zhuǎn)其不會(huì)刷新頁面 ->?單頁面應(yīng)用 ->?用戶體驗(yàn)感良好

(1).安裝路由模塊:npm install vue-router --save-dev;然后重啟 -> npm run serve;? ->?main.js中引入路由模塊,使用中間件,配置路由,Vue實(shí)例中使用該路由router; ->?app.vue使用<router-view>標(biāo)簽才有效果,否則配置路由失??;<router-view></router-view>標(biāo)簽中不需寫內(nèi)容,寫了也沒效果,其就是"展示內(nèi)容" -> 路由配置成功,其可通過路由進(jìn)行訪問;

(2).a標(biāo)簽的使用可成功跳轉(zhuǎn)頁面,但缺點(diǎn)是其會(huì)刷新頁面,即使重復(fù)跳轉(zhuǎn)當(dāng)前頁面,其也會(huì)刷新,Vue路由中提供<router-link>標(biāo)簽,其使用的是to屬性,其進(jìn)行頁面之間的跳轉(zhuǎn)不會(huì)刷新頁面;<router-link to="/helloworld">或者使用<router-link to="hellworld">;//不加“/”也OK

2、Vue中http請(qǐng)求數(shù)據(jù) ->?安裝請(qǐng)求模塊: npm install vue-resource --save-dev;?然后重啟 -> npm run serve; -> main.js中引入請(qǐng)求模塊,添加中間件 ->?組件中使用created鉤子函數(shù)獲取數(shù)據(jù) ->后續(xù)進(jìn)行數(shù)據(jù)的相關(guān)操作即可;

補(bǔ)充:jsonplaceholder官網(wǎng)提供后臺(tái)數(shù)據(jù)接口(開源) ->?網(wǎng)址:http://jsonplaceholder.typicode.com/? 學(xué)習(xí)過程中使用該接口即可,后續(xù)你也可以mock一份假數(shù)據(jù),然后進(jìn)行訪問,網(wǎng)址:

3、axios: npm install axios --save-dev;?重啟:npm? run serve

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第一個(gè) vue-router 路由 路由,其實(shí)就是指向的意思,當(dāng)我點(diǎn)擊頁面上的home按鈕時(shí),頁面中就要顯示hom...
    索倫x閱讀 2,531評(píng)論 0 3
  • 什么是路由? 網(wǎng)絡(luò)頁面與頁面跳轉(zhuǎn),實(shí)現(xiàn)的都是 標(biāo)簽, 標(biāo)簽里面有屬性href,給它定義一個(gè)網(wǎng)絡(luò)地址或者路徑的...
    廖馬兒閱讀 2,741評(píng)論 1 17
  • PS:轉(zhuǎn)載請(qǐng)注明出處作者: TigerChain地址http://www.itdecent.cn/p/9a7d7...
    TigerChain閱讀 64,326評(píng)論 9 218
  • 一.路由 A. 什么是路由? 在以前,我們實(shí)現(xiàn)網(wǎng)頁與網(wǎng)頁跳轉(zhuǎn)使用的是a標(biāo)簽,給href提供網(wǎng)絡(luò)地址或路徑的話,可以...
    祝名閱讀 4,024評(píng)論 0 0
  • 這是我第5篇簡書。 ??由于Vue在開發(fā)時(shí)對(duì)路由支持的不足,于是官方補(bǔ)充了vue-router插件。vue的單頁面...
    東西里閱讀 47,492評(píng)論 20 212

友情鏈接更多精彩內(nèi)容