Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,讓構建單頁面應用變得易如反掌。包含的功能有:javascript
上面是vue-router官方的介紹,接下來我總結一下,本身平時用的vue-router的相關知識,適合入門級別的小白白們,高手請繞(饒)過vue
在使用vue-router以前,咱們首先要把他整合到vue腳手架中,java
(注意:本文的講解基礎是已經默認你安裝好了vue-cli那一套東西)vue-router
vue-router 安裝
npm install vue-router --save
vue-cli
在 src/router/index.js
文件下寫入如下代碼npm
import Vue from 'vue'
import VueRouter from 'vue-router'
//在vue中註冊VueRouter
Vue.use(VueRouter);
//導入路由映射的組件
//普通導入方式
import comA from '@components/comA'
//須要懶加載的導入方式(所謂懶加載就是說,一開始不會加載全部的資源致使等待時間太長,而是當你切換導航的時候,相關組件裏面的資源會陸續加載)
const comB = resolve=>require(['@components/comB'],resolve);
//而後寫出路由映射關係
const routes = [
{
path:'/',
name:'home',
component:home,
},
{
path:'/about',
name:'about',
component:about,
children:[
{
path:'aboutA' //其實至關於 path:'/about/aboutA'
},{
path:'aboutB',
}
]
}
]
複製代碼
這就是比較簡單和比較全的結構了,除去(參數和鉤子,後面講)。 寫完映射關係,而後建立router實例,而且吧映射關係傳進去後端
const router = new VueRouter({
routes
})
//須要注意的是,全局路由鉤子就是要寫在router實例上的,以下
router.beforeEach((to, from, next)=>{
...
next();
})
複製代碼
接下來,咱們來看看vue-router的模式瀏覽器
vue-router默認使用的是hash模式,就是在路由跳轉的時候,會有不少 #
,看起來不太美觀,所以咱們可使用 history模式
,這種模式充分利用了 history.pushState
API來完成URL跳轉而無需從新加載頁面,從而提升了用戶體驗。可是,當你直接訪問 www.root.com/home/page1
的時候,瀏覽器就會真的去請求該地址,若是後端沒有相關的配置,那麼就會返回404,就很尷尬了,因此必定要和後端配合好。ide
模式基本的樣子就是下面的樣子模塊化
const router = new VueRouter({
mode:"history",
routes
})
複製代碼
路由傳參
通常路由有兩種傳參方式,分爲 params
和 query
,先看看params吧,就用官網的例子吧
const User = {
template: '<div>{{$route.params.id}}</div>'
}
const router = new VueRouter({
routes: [
// 動態路徑參數 以冒號開頭
{ path: '/user/:id', component: User }
]
})
複製代碼
在組件內使用$route會使 組件與之高度耦合,從而組件只能在特定的URL上使用,他的靈活性受到了限制,所以可使用props
使他們解耦,
const User = {
props:['id'],
template:`<div>{{id}}</div>`
}
const router = new VueRouter({
routes:[
{
path:'/user/:id',
component:User,
props:true
},
//對於包含命名視圖的路由,你必須分別爲每個命名路由添加 props 選項,以下
{
path:'/user/:id',
components:{default:User,sidebar:SideBar},
props:{default:true,sidebar:false}
}
]
})
複製代碼
這樣一來就極大的增長了組件的靈活性,更加易於重用和測試
params 和 query
query
是這樣用的
//傳參
this.$router.push({
name:'home',
query:{
id:id
}
})
//接受參數
this.route.query.id
複製代碼
params
和query十分類似,
//傳參
this.$router.push({
name:'home',
params:{
id:id
}
})
//接受參數
this.route.params.id
複製代碼
這裏有一點是須要注意的,那就是使用 params的時候,是不可使用path的,由於params自己就是path動態路徑的構成元素,這樣會發生矛盾。
爲了保持一致性,query 和 params傳參的時候,都儘可能 使用nama來進行區分。
參數的位置 通常狀況下
this.$router.push
和router-link
裏面的to
的參數類型是如出一轍的。以下
<router-link to:"/home"></router-link>
//至關於
this.$router.push("/home");
{
name:"home",
path:'/home/:id',
componet:Home
}
<router-link to:"{name:"home",params:{id:"lala"}}"
//至關於
this.$router.push({
name:"home",
params:{
id:"lala"
}
})
複製代碼
以上就是 to
和this.$router.push
參數一直的說明,接下來 咱們就 系統的看一下,路由鉤子
;
全局路由鉤子
beforeEach
and afterEach
const router = new VueRouter({
...
})
//須要注意的是,全局路由鉤子,是路由實例上的,也就是上面的那個 router上的,不要弄混哦
router.beforeEach((to, from, next)=>{
// to 將要到達的路由對象
// from 目標路由對象
// next()進行下一步
// next(false) 中斷當前的跳轉,通常用於 提醒用戶是否確認進入某頁面,用戶取消
//next('/') 或者 next({name:"home",params:{}})
})
router.afterEach((to,from)=>{
...
//導航已經結束,所以沒有next
})
複製代碼
路由映射關係上的 鉤子
beforeEnter
and afterEnter
const router = new VueRouter({
routes:[
{ name:home,
path:'/home',
component:Home,
beforeEnter:(to,from, next) =>{
...
},
afterEnter:(to, from)=>{
...
}
}
]
})
複製代碼
基本上和全局路由鉤子的用法同樣
組件內的鉤子
beforeRouterEnter
and beforeRouterUpdate
(2.2 add) and beforeRouterLeave
export default{
data(){
return {
...
}
},
beforeRouterEnter (to, from, next){
//因爲在使用這以前,導航還未確認,實例尚未被建立,因此這裏面是不能調用this的
},
beforeRouterUpdate(to,from,next){
//次函數的觸發規則是,在相似 /home/:id 這樣的動態路由中,因爲id的變化,可是組件仍然不變的狀況下,即可以使用
//此時實例已經建立完成,所以,this能夠登上舞臺
},
beforeRouterLeave(to,from,next){
//導航離開組件對應路由會觸發這個函數
//能夠訪問this
}
}
複製代碼
這就是我對vue路由的,一些理解和總結,但願可以幫助剛剛入門的小夥伴們,一塊兒加油,堅持寫文章,將來一片光明