vue從創建到完整的餓了么（2）路由

mmy123456 發布于2019-08-20 18:53 / 407人閱讀

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

說明

上一篇地址--創建

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

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

home.vue 創建

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

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

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

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

router路由創建

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

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

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

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

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

根據官網的例子新建一個VueRouter掛到vue下

const router = new VueRouter({
    routes
})

最終main.js修改如下

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

GPU云服務器云服務器餓了么餓了么 js 餓了么配送調度餓了么api接口

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/84839.html

vue從創建到完整的餓了么（3）引入UI框架

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

fantix 2019-08-20 18:53 評論0 收藏0
vue從創建到完整的餓了么（5）v-for，v-bind與計算屬性

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

james 2019-08-20 18:58 評論0 收藏0
vue從創建到完整的餓了么（4）Home.vue布局及vue-resource使用

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

levius 2019-08-20 18:58 評論0 收藏0
vue2 + vuex 高度還原餓了么 App，與官方后臺真實數據交互，獲取商品信息，實現登陸、購

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

JeOam 2019-08-20 14:26 評論0 收藏0