vue保存頁面狀態，Vue 組件的使用及Router路由功能
經過幾天的整理，今天我給大家分享的是關于Vue 組件模板的使用及Router 路由的實現。 看圖1-1-1
圖1-1-1
一、概述
Vue 是一個框架，Vue 有自己語法和類庫。 Vue 與html,css 結合使用，Vue 可以編寫很多公用的組件和模板，從而實現動態修改，提高復用性及運行效率。
Vue 組件，你可以理解為封裝好的某個功能塊。如數據列表展示功能模塊，登錄模塊等。需要使用時，直接引入調用即可，Vue 模板與組件結合使用。
二、準備工作
為了方便管理Vue 第三方類庫，這里使用工具bower進行管理，通過bower install 庫名#版本號 來安裝，bower uninstall 庫名#版本號 來卸載，具體使用方法以下會詳細講解。
使用bower 安裝 vue-router，并引入到頁面中使用。
三、具體實現
(一) bower 工具安裝及實用
以window 為例打開命令窗口如下圖1-1-2：
圖1-1-2
2. 在命令窗口中輸入 npm install bower -g 通過npm 下載bower 安裝
圖1-1-2
安裝完后，即可使用。下面介紹常用的命令：
(1) bower -version 庫名 查看版本
圖1-1-3
(2) bower install 庫名#版本號 安裝類庫 eg: bower install vue#1.0.17
(3) bower uninstall 庫名#版本號 卸載類庫
(4) bower info 庫名 查看類庫，包括版本號，下載地址
（二）代碼實現
使用命令窗口轉到工作目錄VueWork(自己建的)， 再新建目錄lib 文件夾，然后cd lib 中，運行命令bower install vue-router#0.7.13, 下圖是我使用bower 安裝好的vue 和vue-router 類庫，
圖1-1-4
注： 使用bower 工具安裝庫后，會自動生成一個文件夾bower_components，存放項目中所有已安裝的類庫，當卸載某個類庫會自動刪除該文件夾里對應的類庫文件
2. 新建網頁vue-template.html,引入所需要的js 文件，如下圖：
圖1-1-5
3. 全局定義組件及局布定義
圖1-1-6
js 代碼：
如圖1-1-7
html 代碼：
如圖1-1-8
局部組件：
圖1-1-9
js代碼：
圖1-2-1
html 代碼：
圖1-2-2
4. Vue 模板嵌套和傳值問題
圖1-2-3
注: 這里可能有點看不懂,是不是. 原因是我沒寫好布局.這里要實現的效果就是模擬一個聊天功能. 兒子說完把值傳給老爸,然后顯示出來給老爸看,老爸看到后再回復并傳給兒子.就是這樣子邏輯.
html 代碼:
圖1-2-4
圖1-2-5
js 代碼:
圖1-2-6
4. Vue 中Vue-router 的使用
圖1-2-7
注： 點擊鏈接顯示不同的界面
vue-router 的使用方法，js 代碼如下：
圖1-2-8
html 代碼：
圖1-2-9
圖1-3-1
以上就是實現的思路及代碼，如果有不了解的地方歡迎留言。
