這是我第5篇簡書剃氧。
??由于Vue在開發(fā)時對路由支持的不足，于是官方補(bǔ)充了vue-router插件阻星。vue的單頁面應(yīng)用是基于路由和組件的朋鞍，路由用于設(shè)定訪問路徑，并將路徑和組件映射起來妥箕。傳統(tǒng)的頁面應(yīng)用滥酥，是用一些超鏈接來實現(xiàn)頁面切換和跳轉(zhuǎn)的。在vue-router單頁面應(yīng)用中畦幢，則是路徑之間的切換坎吻，實際上就是組件的切換。路由就是SPA（單頁應(yīng)用）的路徑管理器宇葱。再通俗的說瘦真，vue-router就是我們WebApp的鏈接路徑管理系統(tǒng)。
??有的小伙伴會有疑慮黍瞧，為什么我們不能像原來一樣直接用a標(biāo)簽編寫鏈接呢诸尽？因為我們一般用Vue做的都是單頁應(yīng)用，只有一個主頁面index.html印颤，所以你寫的<a></a>標(biāo)簽是不起作用的您机，要使用vue-router來進(jìn)行管理。
一膀哲、安裝
如果你用vue-cli腳手架來搭建項目往产，配置過程會選擇是否用到路由（詳細(xì)見我上一篇簡書），如果選擇y某宪，后面下載依賴會自動下載vue-router仿村。
這里還是說一下安裝：npm install vue-router
二、創(chuàng)建組件
如果在一個模塊化工程中使用它兴喂，必須要通過 Vue.use() 明確地安裝路由功能蔼囊，用vue-cli生產(chǎn)了我們的項目結(jié)構(gòu)焚志，src文件目錄下會有一個router文件夾，此處就是編寫路由組件的地方畏鼓。在src/router/index.js酱酬，這個文件就是路由的核心文件：
import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入vue-router
import Hello from '@/components/Hello' //引入根目錄下的Hello.vue組件
Vue.use(Router) //Vue全局使用Router
export default new Router({
routes: [ //配置路由，這里是個數(shù)組
{ //每一個鏈接都是一個對象
path: '/', //鏈接路徑
name: 'Hello', //路由名稱云矫，
component: Hello //對應(yīng)的組件模板
}膳沽，{
path:'/hi',
component:Hi,
children:[ //子路由,嵌套路由 （此處偷個懶，免得單獨(dú)再列一點）
{path:'/',component:Hi},
{path:'hi1',component:Hi1},
{path:'hi2',component:Hi2},
]
}
]
})
三让禀、router-link制作導(dǎo)航
1.router-link 是一個組件挑社，它默認(rèn)會被渲染成一個帶有鏈接的a標(biāo)簽，通過to屬性指定鏈接地址巡揍。
注意：被選中的router-link將自動添加一個class屬性值.router-link-active痛阻。
<router-link to="/">[text]</router-link>
- to：導(dǎo)航路徑，要填寫的是你在router/index.js文件里配置的path值腮敌，如果要導(dǎo)航到默認(rèn)首頁阱当，只需要寫成 to="/" ，
- [text] ：就是我們要顯示給用戶的導(dǎo)航名稱糜工。
2.router-view 用于渲染匹配到的組件弊添。
①.可以給router-view組件設(shè)置transition過渡（Vue2.0 Transition常見用法全解惑）。
<transition name="fade">
<router-view ></router-view>
</transition>
css過渡類名：
組件過渡過程中啤斗，會有四個CSS類名進(jìn)行切換表箭，這四個類名與transition的name屬性有關(guān)，比如name="fade",會有如下四個CSS類名：
- fade-enter:進(jìn)入過渡的開始狀態(tài)钮莲，元素被插入時生效，只應(yīng)用一幀后立刻刪除彼水。
- fade-enter-active:進(jìn)入過渡的結(jié)束狀態(tài)崔拥，元素被插入時就生效，在過渡過程完成后移除凤覆。
- fade-leave:離開過渡的開始狀態(tài)链瓦，元素被刪除時觸發(fā)，只應(yīng)用一幀后立刻刪除盯桦。
- fade-leave-active:離開過渡的結(jié)束狀態(tài)慈俯，元素被刪除時生效，離開過渡完成后被刪除拥峦。
從上面四個類名可以看出贴膘，fade-enter-active和fade-leave-active在整個進(jìn)入或離開過程中都有效，所以CSS的transition屬性在這兩個類下進(jìn)行設(shè)置略号。
過渡模式mode：
- in-out(mode默認(rèn)in-out模式）：新元素先進(jìn)入過渡刑峡，完成之后當(dāng)前元素過渡離開洋闽。
- out-in：當(dāng)前元素先進(jìn)行過渡離開，離開完成后新元素過渡進(jìn)入突梦。
②.還可以配合<keep-alive>使用诫舅，keep-alive可以緩存數(shù)據(jù)，這樣不至于重新渲染路由組件的時候宫患，之前那個路由組件的數(shù)據(jù)被清除了刊懈。比如對當(dāng)前的路由組件a進(jìn)行了一些DOM操作之后，點擊進(jìn)入另一個路由組件b娃闲，再回到路由組件a的時候之前的DOM操作還保存在俏讹，如果不加keep-alive再回到路由組件a時，之前的DOM操作就沒有了畜吊，得重新進(jìn)行泽疆。如果你的應(yīng)用里有一個購物車組件，就需要用到keep-alive玲献。
<transition>
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
四殉疼、動態(tài)路由匹配
我們經(jīng)常需要把某種模式匹配到的所有路由，全都映射到同個組件捌年。
調(diào)用router的map方法映射路由瓢娜，每條路由以key-value的形式存在，key是路徑礼预，value是組件眠砾。例如：'/home'是一條路由的key，它表示路徑托酸；{component: Home}則表示該條路由映射的組件：
router.map({
'/home': { component: Home },
'/about': { component: About }
})
例如褒颈，我們有一個 User 組件，對于所有 ID 各不相同的用戶励堡，都要使用這個組件來渲染谷丸。那么，我們可以在 vue-router 的路由路徑中使用『動態(tài)路徑參數(shù)』來達(dá)到這個效果应结。
const User = {
template: '<div>User</div>'
}
const router = new VueRouter({
routes: [
// 動態(tài)路徑參數(shù) 以冒號開頭
{ path: '/user/:id', component: User }
]
})
例如： /user/foo 和 /user/bar 都將映射到相同的路由刨疼。
一個『路徑參數(shù)』使用冒號 : 標(biāo)記。當(dāng)匹配到一個路由時鹅龄，參數(shù)值會被設(shè)置到this.$route.params揩慕，可以在每個組件內(nèi)使用。
你可以在一個路由中設(shè)置多段『路徑參數(shù)』扮休，對應(yīng)的值都會設(shè)置到 $route.params 中迎卤。例如：
五、vue-router參數(shù)傳遞
1.用name傳值（不推薦）
2.通過<router-link> 標(biāo)簽中的to傳參
<router-link :to="{name:‘dxl’,params:{key:value}}">東西里</router-link>
- name：就是我們在路由配置文件中起的name值肛炮。
另：命名路由就是用一個名稱來標(biāo)識一個路由止吐，在定義路由的時候設(shè)置一個name屬性即可宝踪。在router-link中也可以用路由的名字來鏈接到一個路由。 - params：就是我們要傳的參數(shù)碍扔，它也是對象形勢瘩燥，在對象里可以傳遞多個值。
最后用$route.params.username進(jìn)行接收.
3.用url傳參
上面第五點也有提到不同。 :冒號的形式傳遞參數(shù)
(1).在router路由配置文件里以冒號的形式設(shè)置參數(shù)
{
path:'/params/:newsId/:userName,
component:Params
}
(2).組件形式厉膀，在src/components目錄下建立我們params.vue組件。
我們在頁面里輸出了url傳遞的參數(shù)二拐。
<template>
<div>
<h2>{{ msg }}</h2>
<p>新聞ID：{{ $route.params.newsId}}</p>
<p>用戶名：{{ $route.params.userName}}</p>
</div>
</template>
<script>
export default {
name: 'params',
data () {
return {
msg: 'params page'
}
}
}
</script>
(3).<router-view>標(biāo)簽path路徑中傳值
<router-link to="/params/888/dxl shuai>params</router-link>
(4).正則表達(dá)式在URL傳值中的應(yīng)用
希望我們傳遞的新聞ID只能是數(shù)字的形式服鹅，這時候我們就需要在傳遞時有個基本的類型判斷，path:'/params/:newsId(\\d+)/:userName'
六.響應(yīng)路由參數(shù)的變化
當(dāng)使用路由參數(shù)時百新，例如從 /user/foo 導(dǎo)航到 /user/bar企软，原來的組件實例會被復(fù)用。因為兩個路由都渲染同個組件饭望，比起銷毀再創(chuàng)建仗哨，復(fù)用則顯得更加高效。不過铅辞，這也意味著組件的生命周期鉤子不會再被調(diào)用厌漂。
復(fù)用組件時，想對路由參數(shù)的變化作出響應(yīng)的話:
(1). watch（監(jiān)測變化） $route 對象：
const User = {
template: '...',
watch: {
'$route' (to, from) {
// 對路由變化作出響應(yīng)...
}
}
}
(2).beforeRouteUpdate 導(dǎo)航守衛(wèi)
如果目的地和當(dāng)前路由相同斟珊，只有參數(shù)發(fā)生了改變 (比如從一個用戶資料到另一個 /users/1 -> /users/2)苇倡，你需要使用 beforeRouteUpdate來響應(yīng)這個變化 (比如抓取用戶信息)。
const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}
}
七囤踩、實現(xiàn)不同路由不同頁面標(biāo)題
// 定義路由的時候如下定義旨椒，name也可為中文
const routes = [
{ path: '/goods', component: goods, name: 'goods' },
{ path: '/orders', component: orders, name: 'orders' },
{ path: '/seller', component: seller, name: 'seller' }
];
// 創(chuàng)建路由實例
const router = new VueRouter({
routes: routes
})
// 關(guān)鍵在這里，設(shè)置afterEach鉤子函數(shù)
router.afterEach((to, from, next) => {
document.title = to.name;
})
八高职、重定向
剛進(jìn)入應(yīng)用都是進(jìn)入到“/”這個路由的钩乍，如果想直接進(jìn)入到“/goods”怎么辦，有兩種方法怔锌。一種是利用重定向，另一種是利用vue-router的導(dǎo)航式編程变过。
redirect基本重定向：
const routes = [
{ path: '/', redirect: '/goods'}
]
重定向的目標(biāo)也可以是一個命名的路由埃元。
const routes = [
{ path: '/', redirect: { name: 'goods' }}
]
重定向時也可以傳遞參數(shù)
{
path:'/',
redirect:'/goods/:newsId(\\d+)/:userName'
}
★.這里不得不提到alias別名的使用。
1.首先我們在路由配置文件里給路徑起一個別名媚狰，dxl岛杀。
{
path: '/hi',
component: Hi,
alias:'/dxl'
}
2.配置我們的<router-link>，起過別名之后崭孤，可以直接使用<router-link>標(biāo)簽里的to屬性类嗤，進(jìn)行重新定向糊肠。
<router-link to="/dxl">jspang</router-link>
區(qū)別：
- redirect：仔細(xì)觀察URL，redirect是直接改變了url的值遗锣，把url變成了真實的path路徑货裹。
- alias：URL路徑?jīng)]有別改變，這種情況更友好精偿，讓用戶知道自己訪問的路徑弧圆，只是改變了<router-view>中的內(nèi)容。
★★★.注意一個大坑：
別名alias在path為'/'中笔咽，是不起作用的搔预。
{
path: '/',
component: Hello,
alias:'/home'
}
九、編程式導(dǎo)航
1.router.push( )
想要導(dǎo)航到不同的 URL叶组，則使用 router.push (在創(chuàng)建vue實例并掛載后調(diào)用)拯田。router.push方法就是用來動態(tài)導(dǎo)航到不同的鏈接的，這個方法會向 history 棧添加一個新的記錄甩十，所以船庇，當(dāng)用戶點擊瀏覽器后退按鈕時，則回到之前的 URL枣氧。
當(dāng)你點擊 <router-link> 時溢十，這個方法會在內(nèi)部調(diào)用，所以說达吞，點擊 <router-link :to="..."> 等同于調(diào)用 router.push(...)张弛。
注意：
如果提供了 path，params 會被忽略酪劫，而 query 并不屬于這種情況吞鸭。取而代之的是下面例子的做法，你需要提供路由的 name 或手寫完整的帶有參數(shù)的 path：
const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 這里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user
2.router.replace( )
router.replace跟 router.push 很像覆糟，唯一的不同就是刻剥，它不會向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當(dāng)前的 history 記錄滩字。
3.router.go(n)
這個方法的參數(shù)是一個整數(shù)造虏，意思是在 history 記錄中向前或者后退多少步，類似 window.history.go(n)麦箍。
// 在瀏覽器記錄中前進(jìn)一步漓藕，等同于 history.forward()
router.go(1)
// 后退一步記錄，等同于 history.back()
router.go(-1)
自定義一個goback()方法挟裂，并使用this.$router.go(-1),進(jìn)行后退操作
<script>
export default {
name: 'app',
methods:{
goback(){
this.$router.go(-1);
},
goHome(){
this.$router.push('/');
}
}
}
</script>
十享钞、路由中的鉤子
1.路由配置文件中的鉤子函數(shù)：
在路由文件中我們只能寫一個beforeEnter,就是在進(jìn)入此路由配置時：
{
path:'/params/:newsId(\\d+)/:userName',
component:Params,
beforeEnter:(to,from,next)=>{
console.log('我進(jìn)入了params模板');
console.log(to);
console.log(from);
next();
},
三個參數(shù)：
- to:路由將要跳轉(zhuǎn)的路徑信息，信息是包含在對像里邊的诀蓉。
- from:路徑跳轉(zhuǎn)前的路徑信息栗竖，也是一個對象的形式暑脆。
- next:路由的控制參數(shù)，常用的有next(true)和next(false)狐肢。
2.寫在模板中的鉤子函數(shù)：
寫在模板中就可以有兩個鉤子函數(shù)可以使用添吗。
beforeRouteEnter：在路由進(jìn)入前的鉤子函數(shù)。
beforeRouteLeave：在路由離開前的鉤子函數(shù)处坪。
export default {
name: 'params',
data () {
return {
msg: 'params page'
}
},
beforeRouteEnter:(to,from,next)=>{
console.log("準(zhǔn)備進(jìn)入路由模板");
next();
},
beforeRouteLeave: (to, from, next) => {
console.log("準(zhǔn)備離開路由模板");
next();
}
}
★此處常用于數(shù)據(jù)獲取根资。
-
導(dǎo)航完成之后獲取：先完成導(dǎo)航，然后在接下來的組件生命周期鉤子中獲取數(shù)據(jù)同窘。在數(shù)據(jù)獲取期間顯示『加載中』之類的指示玄帕。
當(dāng)你使用這種方式時，我們會馬上導(dǎo)航和渲染組件想邦，然后在組件的 created 鉤子中獲取數(shù)據(jù)裤纹。這讓我們有機(jī)會在數(shù)據(jù)獲取期間展示一個 loading 狀態(tài)，還可以在不同視圖間展示不同的 loading 狀態(tài)丧没。
假設(shè)我們有一個 Post 組件鹰椒，需要基于$route.params.id獲取文章數(shù)據(jù)：
<template>
<div class="post">
<div class="loading" v-if="loading">
Loading...
</div>
<div v-if="error" class="error">
{{ error }}
</div>
<div v-if="post" class="content">
<h2>{{ post.title }}</h2>
<p>{{ post.body }}</p>
</div>
</div>
</template>
export default {
data () {
return {
loading: false,
post: null,
error: null
}
},
created () {
// 組件創(chuàng)建完后獲取數(shù)據(jù)，
// 此時 data 已經(jīng)被 observed 了
this.fetchData()
},
watch: {
// 如果路由有變化呕童，會再次執(zhí)行該方法
'$route': 'fetchData'
},
methods: {
fetchData () {
this.error = this.post = null
this.loading = true
// replace getPost with your data fetching util / API wrapper
getPost(this.$route.params.id, (err, post) => {
this.loading = false
if (err) {
this.error = err.toString()
} else {
this.post = post
}
})
}
}
}
-
導(dǎo)航完成之前獲取：導(dǎo)航完成前漆际，在路由進(jìn)入的守衛(wèi)中獲取數(shù)據(jù)，在數(shù)據(jù)獲取成功后再執(zhí)行導(dǎo)航夺饲。
通過這種方式奸汇，我們在導(dǎo)航轉(zhuǎn)入新的路由前獲取數(shù)據(jù)。我們可以在接下來的組件的 beforeRouteEnter 守衛(wèi)中獲取數(shù)據(jù)往声，當(dāng)數(shù)據(jù)獲取成功后只調(diào)用 next 方法擂找。
export default {
data () {
return {
post: null,
error: null
}
},
beforeRouteEnter (to, from, next) {
getPost(to.params.id, (err, post) => {
next(vm => vm.setData(err, post))
})
},
// 路由改變前，組件就已經(jīng)渲染完了
// 邏輯稍稍不同
beforeRouteUpdate (to, from, next) {
this.post = null
getPost(to.params.id, (err, post) => {
this.setData(err, post)
next()
})
},
methods: {
setData (err, post) {
if (err) {
this.error = err.toString()
} else {
this.post = post
}
}
}
}
十一浩销、History 模式
vue-router 默認(rèn) hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL贯涎，于是當(dāng) URL 改變時，頁面不會重新加載慢洋。
如果不想要很丑的 hash塘雳，我們可以用路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉(zhuǎn)而無須重新加載頁面普筹。
const router = new VueRouter({
mode: 'history',
routes: [...]
})
在學(xué)習(xí)過渡效果的時候粉捻，我們學(xué)了mode的設(shè)置，但是在路由的屬性中還有一個mode斑芜。
mode的兩個值：
- histroy:當(dāng)你使用 history 模式時，URL 就像正常的 url祟霍，http://www.dxl.com/user/id
不過這種模式要玩好杏头，還需要后臺配置支持盈包。因為我們的應(yīng)用是個單頁客戶端應(yīng)用，如果后臺沒有正確的配置醇王，當(dāng)用戶在瀏覽器直接訪問 http://www.dxl.com/user/id就會返回 404呢燥，。所以要在服務(wù)端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源寓娩，則應(yīng)該返回同一個 index.html 頁面叛氨，這個頁面就是你 app 依賴的頁面。
這么做以后棘伴，你的服務(wù)器就不再返回 404 錯誤頁面寞埠，因為對于所有路徑都會返回 index.html 文件。為了避免這種情況焊夸，你應(yīng)該在 Vue 應(yīng)用里面覆蓋所有的路由情況仁连，然后在給出一個 404 頁面。
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '*', component: Error}
]
})
這里的path:'*'就是找不到頁面時的配置阱穗，component是我們新建的一個Error.vue的文件
- hash:默認(rèn)’hash’值饭冬，但是hash看起來就像無意義的字符排列，不太好看也不符合我們一般的網(wǎng)址瀏覽習(xí)慣揪阶。不配置時是這樣的：http://localhost:8080/#/users昌抠，多個#號。
十二鲁僚、路由組件傳參
（這點是直接粘貼的vue官網(wǎng)上的教程炊苫，此處是重點要多看多體會！）
在組件中使用 $route 會使之與其對應(yīng)路由形成高度耦合蕴茴，從而使組件只能在某些特定的 URL 上使用劝评，限制了其靈活性。
解耦前：
id不能直接拿出來使用
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})
使用 props 將組件和路由解耦：
const User = {
props: ['id'],
template: '<div>User {{ 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 }
}
]
})
這樣你便可以在任何地方使用該組件蒋畜，使得該組件更易于重用和測試。
1.布爾模式
如果 props 被設(shè)置為 true撞叽，route.params 將會被設(shè)置為組件屬性叉存。
2.對象模式
如果 props 是一個對象，它會被按原樣設(shè)置為組件屬性琅束。當(dāng) props 是靜態(tài)的時候有用诈嘿。
const router = new VueRouter({
routes: [
{ path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
]
})
3.函數(shù)模式
你可以創(chuàng)建一個函數(shù)返回 props。這樣你便可以將參數(shù)轉(zhuǎn)換成另一種類型糠雨，將靜態(tài)值與基于路由的值結(jié)合等等才睹。
const router = new VueRouter({
routes: [
{ path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
]
})
/search?q=vue會將{query: 'vue'}作為屬性傳遞給 SearchUser 組件。
請盡可能保持 props 函數(shù)為無狀態(tài)的，因為它只會在路由發(fā)生變化時起作用琅攘。如果你需要狀態(tài)來定義 props垮庐，請使用包裝組件，這樣 Vue 才可以對狀態(tài)變化做出反應(yīng)坞琴。
function dynamicPropsFn (route) {
const now = new Date()
return {
name: (now.getFullYear() + parseInt(route.params.years)) + '!'
}
}
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ path: '/', component: Hello }, // No props, no nothing
{ path: '/hello/:name', component: Hello, props: true }, // Pass route.params to props
{ path: '/static', component: Hello, props: { name: 'world' }}, // static values
{ path: '/dynamic/:years', component: Hello, props: dynamicPropsFn }, // custom logic for mapping between route and props
{ path: '/attrs', component: Hello, props: { name: 'attrs' }}
]
})
