Vue-router

Router是路由的意思。Router的功能就如它名字一般，實現對路由的操作。

我們可以換個角度理解：路由器相信大家都聽過，也就是家裏連接寬帶的貓。路由器可以散播WiFi信號，我們通過連接這個WiFI來使用與之綁定的寬帶賬號提供的網絡服務。那麽路由器的功能就是把寬帶賬號與它本身的WiFi相綁定。那麽將此概念移到前端項目中來，Router的作用就是將各個頁面與地址相互綁定，但是Router與路由器不同的是，Router控制的是多個頁面，不像路由器一樣只控制一個寬帶賬號，所以Router還需要對頁面進行控制。

舉個例子：假設 www.huawei.com 是華為的官網，那麽通過 www.huawei.com/shopping 來訪問華為商城，這就是Router可以做到的事。

Vue-router的安裝

Vue-Router是Vue的核心插件之一，當我們需要使用它時，我們就要把它引入頁面或者項目文件裏。

（1）在HTML頁面引入Vue-router.js文件

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

（2）在Vue項目裏引入Vue-Router

在Vue-cli腳手架創建項目時，會有一個詢問是否安裝Vue-router，直接選Y即可。

若是未安裝Vue-router的項目，則需要使用npm安裝Vue-router，然後在main.js文件中配置好

NPM

main.js

在Vue-router文件引進來之後，我們可以通過 this.$router 在全局訪問路由器，也可以通過 this.$route 來訪問當前路由。

帶有路由功能的標簽

Vue提供兩個比較特殊的標簽：<router-link>和<router-view>

<router-link>標簽是具有路由功能的標簽，它有一個to屬性，屬性值為目標路由，該標簽默認渲染成<a>標簽，點擊它會跳轉至to屬性所指定的目標路由。

<router-view>標簽如同它的名字一樣，是對目標路由的展示，和<router-link>配合使用。但是它有一個條件，就是<router-link>標簽的to屬性指定的路由必須是當前路由的子路由，不然<router-view>不生效，而當前頁面會直接發生跳轉。

如圖所示

頁面分為四部分，最大的區域就是router-view區域，在點擊當前頁面的子路由 index 或 adult 時，router-view區域會展示相應的頁面，而點擊非當前頁面的子路由時，當前整個頁面會跳轉至點擊的路由界面。

Vue-Router學習記錄（一）