vue - router + iView 的使用（簡單例子）

所使用的工具：谷歌瀏覽器、Nodejs(自帶npm)、HBuilder

0、要先安裝Nodejs，下載安裝便可

　　0-一、安裝vue-cli，打開cmd 輸入 npm install -g @vue/cli 安裝cli服務，安裝完後，咱們就有一個vue命令能夠被調用了。

一、使用 vue 命令 建立一個項目

回車。

回車。

等待建立完成。

二、項目建立完成，切入到項目中

三、而後增長一些UI的支持（我這裏演示使用的是 iView 你也可使用 ElementUI）

回車。

回車。

 

回車。而後等待..........

安裝完成。

四、增長 router 支持。

先輸入 vue add router 而後回車。

回車。

 而後等待安裝..........

安裝完成。

五、開啓項目的服務。

　　5.1 輸入 npm run serve 而後回車。

 

服務開啓成功。

六、在瀏覽器輸入http://localhost:8080/

 

 這樣就能夠訪問到咱們的項目主頁面了。

注意：V 圖標上面有 Home 和 About 點擊能夠進行換頁面。（這裏使用到了router，這是咱們裝router的時候，它自動給咱們作了一個演示的例子）

七、咱們來編碼一下。

打開目錄

去到HelloWord.vue 進行一個頁面編碼。

 

將裏面的東西所有去掉，而後去iView官網找一個組件來使用。地址:https://www.iviewui.com/components/layout

使用這個佈局吧。

 複製這個佈局的演示代碼。

粘貼到HelloWord.vue中。（保存）

八、主頁面就變成這這樣子了。

 

 七、將App.vue文件中的代碼編碼爲：

 

 主頁面就改變了。

八、修改Home.vue文件的代碼（修改完成記得保存）

九、去HolleWord.vue編寫一些代碼

 

 

 

十、改變經過 to 獲得的組件信息

十一、動態路徑參數（router.js）

經過 this,$route.params（獲得的是一個數組）的方法取出。

運行結果:

 

 vue-router詳細使用的地址:https://router.vuejs.org/zh/guide/essentials/dynamic-matching.htm

本次示例下載地址：https://github.com/oukele/router-demo

 

堅持就是勝利，加油！！！