程序員的一天vue+node+mysql(二)


路由

這個為項目大概的目錄結構,做到后台的時候會繼續添加

接下來重點介紹路由

1.首先確定安裝了路由,或者是直接在項目里安裝,或者在package.json中寫入安裝,或者cnpm install --save vue-router,都可以

我覺得最好能在package.json中體現出來最好

2.編寫路由

如果你有ui的話,ui會把頁面給你,頁面結構的話不用你操心,如果像我這樣全部靠自己或者自己想做點什么的話,最好提前把頁面目錄考慮好

我這個demo頁面比較簡單 業務邏輯先放在一邊 ,也就兩個大頁面  一個是登陸頁 一個是內容頁 內容頁里邊有幾個子頁面 ,好了,do it!

首先是模塊的加載,用的是require.ensure 

require.ensure的用法和好處參考這里

http://www.css88.com/doc/webpack2/guides/code-splitting-require/

http://cnodejs.org/topic/586823335eac96bb04d3e305

組件的引入和使用

路由的編寫

來分析一下以上的路由

vue的思想:所有的vue文件都是組件,父組件中有子組件,這里邊最大的組件是App,兩個大頁面包含在這個大的父組件中,children很好的說明了父子關系

之后path和component 是url和組件的映射關系

特別注意的是  {path: '', redirect: '/login'} 這里邊是做了一個過濾 ,如果url為空的話指向的也是login頁面 

3.main.js中引入路由

還是那幾步

引入

ues

實例化

作為參數傳遞給vue對象

4.驗證

簡單編寫好頁面后(過程省略),驗證一下

成功!!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM