亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

mmy123456 / 461人閱讀

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

說明

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

蒼渡大神Github項目源碼地址--源碼地址

下一篇地址--引入UI框架

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，修改如圖

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

router路由創(chuàng)建

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

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

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

因為要用路由模塊和自己寫的routers.js文件，所以先引進來

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

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

const router = new VueRouter({
    routes
})

最終main.js修改如下

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/84839.html

相關(guān)文章

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

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

    fantix 評論0 收藏0

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

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

    james 評論0 收藏0

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

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

    levius 評論0 收藏0

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

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

    JeOam 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<