一、 Vue-router的構成
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。
<router-link> 是一個組件，該組件用於渲染一個導航鏈接，切換不同 HTML 內容。to 屬性爲目標地址， 即要顯示的內容。
<router-view>用於渲染路由匹配之後的顯示對應內容
二、 Vue-router的基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<ul>
<!-- 使用 router-link 組件來導航. -->
<!-- 通過傳入 `to` 屬性指定鏈接. -->
<!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 -->
<li><router-link to="/">首頁</router-link></li>
<li><router-link to="/documents">文檔</router-link></li>
<li><router-link to="/download">下載</router-link></li>
</ul>
<!-- 路由匹配到的組件將渲染在這裏 -->
<router-view></router-view>
</div>
<script type="text/javascript">
// 1創建 router 實例，然後傳 `routes` 配置
const router = new VueRouter({
routes:[
{
// 2每個路由應該映射一個組件。其中"component" 可以是
path:"/",
component:{
template:`
<div>這裏是首頁</div>
`
}
},
{
path:"/documents",
component:{
template:`
<div>這裏是文檔頁</div>
`
}
},
{
path:"/download",
component:{
template:`
<div>這裏是下載頁</div>
`
}
}
]
})
const vm = new Vue({
el:"#app",
data:{
},
// 3通過 router 配置參數注入路由，
router:router
})
</script>
</body>
</html>
三、this.$router 與 this.$route
this.$router 爲VUE實例的屬性，類似this.$data、this.$methods
擁有push、replace、go等常用方法
this.$route 代表的是當前路由
擁有name、meta、path、hash、query、params、fullPath等常用屬性
四、當前激活路由
router-link 默認會渲染出a標籤
當前激活的a標籤會自動添加以下兩個類名
router-link-exact-active 精確匹配規則
router-link-active 匹配規則
常用激活路由的樣式控制
<style type="text/css">
.router-link-exact-active{
color: red;
}
</style>
五、路由帶參
一個“路徑參數”使用冒號 : 標記。當匹配到一個路由時，參數值會被設置到 this.$route.params，可以在每個組件內使用。
定義帶參路由
{
path:"/goods/:id",
component:{
template:`
<div>當前商品爲：{{$route.params.id}}</div>
`
}
}
展示帶參路由
<div>
<div>這裏是首頁</div>
<ul>
<li v-for="i in 9"> <router-link :to="'/goods/'+i">商品{{i}}</router-link> </li>
</ul>
</div>
六、路由嵌套
在路由/user 中包含子路由 /user/login與/user/regist兩個子路由
{
// 定義用戶路由 在組件中顯示可以切換到登錄註冊的鏈接 並且需要定義用於顯示子路由的router-view
path:"/user",
component:{
template:`
<div>
<div>當前爲用戶頁面</div>
<ul>
<li><router-link to="/user/login">登錄</router-link></li>
<li><router-link to="/user/regist">註冊</router-link></li>
</ul>
<router-view></router-view>
</div>
`
},
children:[
{
// 定義子路由時path 不能以/開頭
path:"login",
component:{
template:`
<div>
登錄組件
</div>
`
}
},
{
path:"regist",
component:{
template:`
<div>
註冊組件
</div>
`
}
}
]
}
七、路由重定向
對六中定義的子路由，如果想在進入時顯示登錄組件可以使用重定向，即在進入/user時進入/user/login
即在定義路由時使用redirect重定向
{
path:"/user",
redirect:"/user/login",
...
}
八、路由命名
在定義路由時使用name屬性給路由名字
{
// 定義子路由時path 不能以/開頭
path:"login",
name:"login",
...
},
{
path:"regist",
name:"regist",
...
}
路由跳轉時不需要寫入絕對路徑，只需要寫入名字即可
//絕對路徑寫法
<li><router-link to="/user/login">登錄</router-link></li>
<li><router-link to="/user/regist">註冊</router-link></li>
//使用路由名字寫法
<li><router-link :to="{name:'login'}">登錄</router-link></li>
<li><router-link :to="{name:'regist'}">註冊</router-link></li>
九、路由守衛
路由守衛可以分爲全局路由守衛與獨享路由守衛
全局路由守衛
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
獨享路由守衛
const router = new VueRouter({
routes: [
{
path: '/',
component: Home,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
to: Route: 即將要進入的目標路由對象
from: Route: 當前導航正要離開的路由
next: Function: 一定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。
使用路由守衛驗證權限案例
在需要授權的路由中添加meta屬性
{
path:"/download",
meta:{
auth:true
},
component:{
template:`
<div>這裏是下載頁</div>
`
}
},
在守衛中進行判斷處理
router.beforeEach(function(t,f,n){
if(t.meta.auth){
let logined = false
if(logined){
n()
}
else
{
n("/user/login?next="+t.path)
}
}
else
{
n()
}
})
更多的鉤子函數可以查看官方文檔
十、滾動行爲
使用前端路由，當切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時頁面如何滾動。
當創建一個 Router 實例，你可以提供一個 scrollBehavior 方法：
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滾動到哪個的位置
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
})
