vue-router安裝和配置方法

vue-router是vue.js官方的路由插件，里面組件和URL的映射關系由vue-router幫我們管理。在vue-router的單頁面應用中，頁面的路徑的改變就是組件的切換。

一：首先下載插件，當我們初始化項目時，有一個選項vue-router選項，我們選y,他就幫我們自動下載插件了。

 

 如果沒選，也可以手動安裝  npm install vue-router --save

二：

 

1. 導入路由對象，並且調用Vue.use(Router)
2. 創建路由實例，並且傳入路由映射配置
3. 在vue實例中掛載創建的路由實例

 index.js文件夾基本配置

 

 

 

 使用vue-router的步驟

1. 創建路由組件
2. 配置路由映射:組件和路徑映射關系
3. 適用路由：通過<router-link>和<router-view>

 

 

 

 

 

 <router-view>該標簽會根據當前的路徑，動態渲染不同的組件替換到router-view的位置。

 

路由的默認路徑

 

在上面當我們想加載首頁的組件，但是需要點擊才可以加載相應的組件，但是有些需求例如首頁是默認不用點擊直接顯示在頁面上，這時候我們應該怎么處理呢？

在router的index.js 文件里多配置 一個映射

 

改變URL不跳轉路徑有兩種方法

方法一：使用BOM對象上的location對象上的hash

 

 方法二：使用BOM對象上的history對象

 

 Vue-router默認使用的是第一種hash（默認）

使用hash會在路徑上出現井號  #，而使用history沒有井號