11.Vue.js前端框架：vue-router路由
1、常用外掛有哪些
在利用 Vue.js 開發一個完整的單頁 Web 應用時，還需要使用 Vue.js 提供的外掛。Vue.js 比較常用的外掛是 vue-router 和 axios。其中 vue-router 提供的是路由管理的功能，axios 提供的是資料請求的功能。
2、應用 vue-router 實現路由
2.1 vue-router 外掛引入
vue-router 外掛可以提供路由管理的功能。而在使用該外掛之前需要在頁面引入該外掛，引用 vue-router 外掛的方法主要有下列三種方式：
vue-router 外掛下載網址： https://router.vuejs.org/zh/installation.html
1. 直接下載並使用 script 標籤引入
在 Vue.js 官網中直接下載 vue-router 外掛檔案並使用 script 標籤引入。具體步驟如下：
（1）進入 vue-router 的下載頁面，找到下載的超連結，圖片如下圖所示：
（2）單擊滑鼠右鍵，找到“連結另存為”選項，將 vue-router 外掛儲存到專案指定的資料夾中，通常和 vue.js 檔案統一放置在專案的 JS 資料夾中，然後在頁面中使用下面的語句，將其引入到檔案中。
<script type="text/javascript" src="JS/vue-router.js" 
2. 使用 CDN 方法
在專案中使用 vue-router.js，可以採用引用外部 CDN 檔案的方式。在專案中直接通過 script 標籤載入 CDN 資料夾，程式碼如下所示：
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
3. 使用 NPM 方法
使用 NPM 方法進行安裝的命令如下所示：
npm install vue-router
引用方式如下：
import Vue from 'Vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
2.2 vue-router 基礎用法
應用 Vue.js 和 vue-router 可以建立簡單的單頁面應用。使用 Vue.js 可以通過多個元件來組成應用程式，而 vue-router 的作用是將每個路徑對映到對應的元件，並通過路由進行元件之間的切換。
Vue.js 路由允許通過不同的 URL 訪問不同的內容。通過路由實現元件之間的切換需要使用 router-link 元件，該元件用於設定一個導航連結，通過 to 屬性設定目標地址，從而切換不同的 HTML 內容。
實現一個簡單的路由程式碼如下所示：
<div id="box">
<p>
<!--使用<router-link>元件進行導航 -->
<!--通過傳入 to 屬性指定連結 -->
<!--<router-link>預設會被渲染成一個<a>標籤 -->
<router-link to="/first">頁面一</router-link>
<router-link to="/second">頁面二</router-link>
<router-link to="/third">頁面三</router-link>
</p>
<!-- 路由出口，路由匹配到的元件渲染的位置-->
<router-view></router-view>
</div>
<script type="text/javascript">
//定義路由元件，可以從其他檔案 import 引入進來
var first ={
template:'<div>頁面一：腳踏實地</div>'
};
var second ={
template:'<div>頁面二：保持初心</div>'
};
var third ={
template:'<div>頁面三：做自己想做的事</div>'
};
//定義路由，每個路由應該對映到一個元件。其中 component 可以是通過 Vue.extend()建立的元件構造器，或者是一個元件選項物件
var routes =[
{ path:'/first',component:first},
{ path:'/second',component:second},
{ path:'/third',component:third}
];
//建立 router 例項,傳入 routes 配置引數，還可以傳入其他配置引數
var router =new VueRouter({
routes //相當於 routes:routes 的縮寫
});
//建立和掛載根例項。通過 router 配置引數注入路由，讓整個應用都有路由功能
var app = new Vue({
router
}).$mount('#box');
</script>
在上述程式碼中，router-link 會被渲染成 a 標籤。例如，第一個 router-link 會被渲染成 < a href="#/first" >頁面一< /a>。當點選第一個 router-link 對應的標籤時，由於 to 屬性的值是 /first，因此實際的路徑地址就是當前 URL 路徑後加上 #/first。這時，Vue 會找到定義的路由 routes 中 path 為 /first 的路由，並將對應的元件模板渲染到 router-view 中。執行結果如下圖所示：
2.3 路由動態匹配
在實際開發中，經常需要將某種模式匹配到的所有路由全部對映到同一個元件。例如，對於所有不同 ID 的使用者，都需要使用同一個元件 User 來渲染。因此，可以在 vue-router 的路由路徑中使用動態路徑引數來實現這個效果。示例程式碼如下所示：
<script type="text/javascript">
var User ={
template:'<div>User</div>'
}
var router = new VueRouter({
routes:[
//動態路徑引數，以冒號開頭
{ path:'/user/:id' component:User}
]
})
</script>
上述程式碼中，:id 記為設定的動態路徑引數。
2.4 巢狀路由
有些介面通常是由多層巢狀的元件組合而成，例如，二級導航選單就需要使用巢狀路由。使用巢狀路由時，URL 中各段動態路徑會按照某種結構對應巢狀的各層元件。
在前面，我們知道 router-view 是最頂層的出口，用於渲染最高階路由匹配到的元件。同樣，一個被渲染的元件的模板中同樣可以包含巢狀的 router-view。要在巢狀的出口中渲染元件，需要在 VueRouter 例項中使用 children 引數進行配置。
1、例如，router-view 是最頂層的出口，它會渲染一個和最高階路由匹配的元件。示例程式碼如下所示：
<div id="box">
<router-view></router-view>
</div>
<script type="text/javascript">
var User ={
template:'<div>使用者{{$route.params.id}}</div>'
}
var router = new VueRouter({
routes:[
//動態路徑引數，以冒號開頭
{ path:'/user/:id' component:User}
]
})
</script>
2、同樣，在元件的內部也可以包含巢狀的 router-view。例如，在User 元件的模板中新增一個 router-view，示例程式碼如下所示：
var User ={
template:'<div>,
<span>使用者{{$route.params.id}}</span>
<router-view></router-view>
</div>'
}
3、如果在巢狀的出口中渲染元件，需要在 VueRouter 中使用 children 引數進行配置。示例程式碼如下：
var router = new VueRouter({
routes:[
{
path :'/user/:id',
component:User,
children:[{
// /user/:id/sex匹配成功後，UserSex會被渲染在User的 <router-view>中
path:'sex',
component:UserSex
},{
// /user/:id/age匹配成功後，UserSex會被渲染在User的 <router-view>中
path:'age',
component:UserAge
}]
}
]
})
4、需要注意的是，如果訪問一個不存在的路由，則渲染元件的出口不會顯示任何內容。這時可以提供一個空的路由。示例程式碼如下所示：
var router = new VueRouter({
routes:[
{
path :'/user/:id',
component:User,
children:[{
// /user/:id/sex匹配成功後，UserSex會被渲染在User的 <router-view>中
path:'',
component:UserSex
},{
// /user/:id/age匹配成功後，UserSex會被渲染在User的 <router-view>中
path:'age',
component:UserAge
}]
}
]
})
2.5 命名路由
在進行路由跳轉時，可以為較長的路由設定一個別名。在建立 VueRouter 例項時，在 routes 配置中可以為某個路由設定名稱。示例程式碼如下：
var router = new VueRouter({
routes:[
{
path : '/user/:id',
name:'user',
component:User
}
]
})
在設定路由名稱後，要想連結到該路徑，可以為 router-link 的 to 屬性傳入一個物件。程式碼如下：
<router-link :to="{name:'user',params:{id:1}}">使用者</router-link>
單擊“使用者”連結時，會將路由導航到 /user/1 路徑
2.6 應用 push() 方法定義導航
使用 < router-link > 建立 < a > 標籤可以定義導航連結。除此之外，還可以使用 router 的例項方法 push() 實現導航的功能。在 Vue 例項內部可以通過 $router 訪問路由例項，通過呼叫 this. $router.push 即可實現頁面的跳轉。
該方法的引數可以是一個字串路徑，或者是一個描述地址的物件。示例程式碼如下所示：
// 跳轉到字串表示的路徑
this.$router.push('home')
//跳轉到指定路徑
this.$router.push({path:'home'})
//跳轉到指定命名的路由
this.$router.push({name:'user'})
//跳轉到指定路徑並帶有查詢引數
this.$router.push({path:'home',query:{id:'2'}})
//跳轉到指定命名的路由並帶有查詢引數
this.$router.push({name:'user',params:{userID:'1'}})
2.7 命名檢視
在頁面佈局時，有些頁面分為頂部、左側導航欄和主內容3個部分，這種情況下需要將每個部分定義為一個檢視。為了在頁面中同時展示多個檢視，需要為每個檢視進行命名，通過名字進行對應元件的渲染。在介面中可以有多個單獨命名的檢視，而不是隻有一個單獨的出口。如果沒有為 router-view 設定名稱，那麼它的名稱預設為 default。
1、為介面設定 3 個檢視的程式碼如下：
<router-view class="top"></router-view>
<router-view class="left" name="left"></router-view>
<router-view class="main" name="main"></router-view>
2、由於一個檢視使用一個元件渲染，對於同一個路由，多個檢視就需要多個元件進行渲染。為上述三個檢視應用元件進行渲染的程式碼如下：
var router =new VueRouter({
routes :[
{
path:'',
components:{
default:Top,
left:Left,
main:Main
}
}
]
})
3、對於一個應用多檢視的簡單示例程式碼如下所示：
<div id="app">
<ul>
<li>
<router-link to="/one">介面一</router-link>
</li>
<li>
<router-link to="/two">介面二</router-link>
</li>
</ul>
<router-view class="left" name="left"></router-view>
<router-view class="main" name="main"></router-view>
</div>
<script type="text/javascript">
var LeftOne ={ //定義LeftOne元件
template:'<div>左側導航欄一</div>'
};
var MainOne ={//定義MainOne元件
template:'<div>主內容一</div>'
};
var LeftTwo ={ //定義LeftTwo元件
template:'<div>左側導航欄二</div>'
};
var MainTwo ={//定義MainTwo元件
template:'<div>主內容二</div>'
};
var router =new VueRouter({
routes:[{
path:'/one', //one匹配成功後渲染的元件
components:{
left:LeftOne,
main:MainOne
}
},{
path:'/two',//two匹配成功後渲染的元件
components:{
left:LeftTwo,
main:MainTwo
}
}]
});
var app =new Vue({
el:'#app',
router
});
</script>
2.8 重定向
如果要訪問的路徑設定了重定向規則，則訪問該路徑時會被被重定向到指定的路徑。重定向也是通過 routes 配置來完成。例如，設定路徑從 /a 重定向到 /b 的程式碼如下：
var router =new VueRouter({
routes :[
{path:'/a',redirect :'/b'}
]
})
上述程式碼中，當用戶訪問路徑 /a 時，URL 中的 /a 將會被替換為 /b，並匹配路由 /b，該路由對映的元件將會被渲染。
重定向的目標也可以是一個命名的路由。例如，將路徑 /a 重定向到名稱為 user 的路由，示例程式碼如下所示：
var router =new VueRouter({
routes :[
{path:'/a',redirect :{name:'user'}}
]
})