成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue從創(chuàng)建到完整的餓了么（2）路由

mmy123456 / 432人閱讀

摘要：首先在下創(chuàng)建文件夾，在下創(chuàng)建文件，所有的路由控制都寫在這個(gè)文件里。表示路徑，表示顯示的頁面要顯示哪個(gè)文件，表示的嵌套的路由。

說明

上一篇地址--創(chuàng)建

蒼渡大神Github項(xiàng)目源碼地址--源碼地址

下一篇地址--引入U(xiǎn)I框架

home.vue 創(chuàng)建

根據(jù)源碼，先在src文件夾下新建文件夾page，在page中新建home文件夾，在home文件夾中新建home.vue，home.vue代碼如圖

template中寫html，script中寫js，style中寫css，style scoped的意思是css樣式只在本頁面使用

頁面內(nèi)容先就寫這么多，但是頁面怎么顯示呢？打開App.vue，修改如圖

頁面會(huì)顯示在里，一個(gè)頁面可以用幾個(gè)我也不會(huì)等用到再說，現(xiàn)在的問題是怎么讓知道顯示咱們的home.vue呢？

router路由創(chuàng)建

用vue-router來控制顯示哪個(gè)頁面（我也不會(huì)邊學(xué)邊用，官方文檔在此），使用的話先引用到vue里（上一章的創(chuàng)建時(shí)候用npm已經(jīng)下載了），這里可以直接使用。

首先在src下創(chuàng)建router文件夾，在router下創(chuàng)建routers.js文件，所有的路由控制都寫在這個(gè)文件里。

看了一下源碼的路由，看得我頭皮發(fā)麻，算了先自己寫寫看，es6等以后再學(xué)。routers.js頁面代碼
8. 輸出一個(gè)數(shù)組，數(shù)組里有一個(gè)對(duì)象（因?yàn)樗械捻撁娑紥煸贏pp.vue里所以只有一個(gè)對(duì)象，這是我目前的理解）。path表示路徑，component表示顯示的頁面（要顯示哪個(gè)xxx.vue文件），children表示的嵌套的路由。路由先寫這么多，但是輸出路由了誰來執(zhí)行呢？打開main.js文件。

因?yàn)橐寐酚赡K和自己寫的routers.js文件，所以先引進(jìn)來

import VueRouter from "vue-router"
import routes from "./router/routers"
Vue.use(VueRouter)

根據(jù)官網(wǎng)的例子新建一個(gè)VueRouter掛到vue下

const router = new VueRouter({
    routes
})

最終main.js修改如下

用cmd運(yùn)行試試，彈出以下頁面ok，運(yùn)行成功，接下來應(yīng)該寫頁面了吧？

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84839.html

相關(guān)文章

  • vue從創(chuàng)建到完整的餓了么（3）引入U(xiǎn)I框架

    摘要：說明上一章從創(chuàng)建到完整的項(xiàng)目路由蒼渡大神項(xiàng)目源碼地址地址下一章布局以及框架咱們先看一下的效果圖，原網(wǎng)址在此接下來用什么框架呢因?yàn)橐郧坝玫氖?，所以這次用練練手，文檔在此首先下載結(jié)果如圖那兩個(gè)警告說的啥我也不懂，先不管大神指 說明 上一章--vue從創(chuàng)建到完整的項(xiàng)目（2）路由 蒼渡大神項(xiàng)目源碼地址--Github地址 下一章--Home布局以及vue-resource UI框架 ...

    fantix 評(píng)論0 收藏0

  • vue從創(chuàng)建到完整的餓了么（5）v-for，v-bind與計(jì)算屬性

    摘要：的命令都用來開頭。用來綁定屬性。排序思路重新創(chuàng)建一個(gè)，鍵名是從到，鍵值就是獲取的數(shù)據(jù)的鍵值。計(jì)算函數(shù)寫在哪一種方法是寫在生命周期的數(shù)據(jù)請(qǐng)求里，直接返回一個(gè)處理好的，但咱們用另一種方法計(jì)算屬性。把這個(gè)加到城市名字的上即可解決。 說明 1.上一章--Home.vue及vue-resource使用2.cangdu大神的項(xiàng)目源碼地址--Github地址3.接口地址--Github地址4.UI框...

    james 評(píng)論0 收藏0

  • vue從創(chuàng)建到完整的餓了么（4）Home.vue布局及vue-resource使用

    摘要：咱們?cè)诘谝徽聞?chuàng)建的時(shí)候已經(jīng)安裝了。而從創(chuàng)建到使用到結(jié)束分為了十個(gè)周期，稱為生命周期鉤子，而是把數(shù)據(jù)加載的的時(shí)候調(diào)用這是我目前的理解。中有兩個(gè)函數(shù)，第一個(gè)是請(qǐng)求成功的函數(shù)，第二個(gè)是請(qǐng)求失敗的函數(shù)。 說明 1.上一章--引入U(xiǎn)I框架2.蒼渡大神Github源碼地址--源碼地址3.UI框架用的是Mint UI，上一章已經(jīng)引入4.數(shù)據(jù)接口地址--Github5.下一章--v-for,v-bin...

    levius 評(píng)論0 收藏0

  • vue2 + vuex 高度還原 餓了么 App，與官方后臺(tái)真實(shí)數(shù)據(jù)交互，獲取商品信息，實(shí)現(xiàn)登陸、購

    摘要：注此項(xiàng)目純屬個(gè)人瞎搞，正常下單請(qǐng)選擇餓了么官方客戶端。目前下單功能已經(jīng)實(shí)現(xiàn)，下單功能完全采用官網(wǎng)真實(shí)數(shù)據(jù)，可以控制官網(wǎng)發(fā)短信或者打電話到指定的手機(jī)號(hào)碼，下單后可以在手機(jī)中查看并且付款。 前言 vue2的發(fā)布后自己也研究了一段時(shí)間，奈何公司的技術(shù)棧是以react為主，沒有機(jī)會(huì)好好利用vue2去做一個(gè)完整的項(xiàng)目。雖然寫了幾個(gè)demo，但和寫一個(gè)完整的項(xiàng)目還是有很大差別的。于是自己想著用空余...

    JeOam 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<