Vue.js的一大特色就是構(gòu)建單頁面應(yīng)用十分方便，既然要方便構(gòu)建單頁面應(yīng)用那么自然少不了路由剃袍，vue-router就是vue官方提供的一個路由框架善绎∏總體來說，vue-router設(shè)計得簡單好用禀酱，下面就來聊聊我實際用到過的一些方法炬守，文章沒有提到的可以去查看官方文檔。vue-router的安裝這里就不提了剂跟，相信會來看這篇博客同學(xué)减途，這些基本能力都是有的。
先上例子
<!-- html部分曹洽，省略head -->
<div id="app">
<div class="content">
<router-link to="/goods">商品</router-link>
<router-link to="/ratings">評論</router-link>
<router-link to="/seller">商家</router-link>
</div>
<router-view></router-view>
</div>
<script src="path-to-vue"></script>
<script src="path-to-vue-router"></script>
// 首先定義或者引入路由的組件
// 方法一：直接定義路由組件
const goods = { template: '<p>goods</p>' };
const ratings = { template: '<p>ratings</p>' };
const seller = { template: '<p>seller</p>' };
// 方法二：import引入路由組件
import goods from 'components/goods/goods';
import ratings from 'components/ratings/ratings';
import seller from 'components/seller/seller';
// 然后定義路由(routes)鳍置，components還可以是Vue.extend()創(chuàng)建的
const routes = [
{ path: '/goods', component: goods },
{ path: '/ratings', component: ratings },
{ path: '/seller', component: seller }
];
// 接著創(chuàng)建路由實例
const router = new VueRouter({
// ES6縮寫語法，相當(dāng)于routes:routes
routes
});
// 最后創(chuàng)建vue實例并掛載
const app = new Vue({
el: '#app',
router
});
// 或者
const app = new Vue({
router
}).$mount('#app')
到這里就可以用vue-router輕松搭建一個單頁面應(yīng)用了送淆。我一般都是使用模塊化編程的形式税产，用.vue單文件，不知道在模塊化編程里怎么加載vue-router的可以參考我的某個項目源碼偷崩。
router-link和router-view
看了上面的例子辟拷，一定對router-link和router-view很感興趣。
router-link
從上面例子中的書寫形式就可以看出阐斜，router-link是一個組件衫冻，它默認會被渲染成一個帶有鏈接的a標(biāo)簽，通過to屬性指定鏈接地址智听。
注意：被選中的router-link將自動添加一個class屬性值.router-link-active羽杰。
router-link屬性配置
to
這是一個必須設(shè)置的屬性，否則路由無法生效到推。它表示路由的鏈接考赛，可以是一個字符串也可以是一個描述目標(biāo)位置的對象。
<router-link to="goods"></router-link>
<router-link to="{path='goods'}"></router-link>
replace
一個布爾類型莉测，默認為false颜骤。如果replace設(shè)置為true，那么導(dǎo)航不會留下history記錄捣卤，點擊瀏覽器回退按鈕不會再回到這個路由忍抽。
<router-link to="goods" replace></router-link>
tag
router-link默認渲染成a標(biāo)簽，也有方法讓它渲染成其他標(biāo)簽董朝，tag屬性就用來設(shè)置router-link渲染成什么標(biāo)簽的鸠项。
<!-- 渲染成li標(biāo)簽 -->
<router-link to="goods" tag="li"></router-link>
active-class
上面說了被選中的router-link將自動添加一個class屬性值.router-link-active，這個屬性就是來修改這個class值的子姜。
router-view
這個組件十分關(guān)鍵祟绊，它就是用來渲染匹配到的路由的。
可以給router-view組件設(shè)置transition過渡，具體用法見Vue2.0 Transition常見用法全解惑牧抽。
還可以配合<keep-alive>使用嘉熊，keep-alive可以緩存數(shù)據(jù)，這樣不至于重新渲染路由組件的時候扬舒，之前那個路由組件的數(shù)據(jù)被清除了阐肤。比如對當(dāng)前的路由組件a進行了一些DOM操作之后，點擊進入另一個路由組件b讲坎，再回到路由組件a的時候之前的DOM操作還保存在孕惜，如果不加keep-alive再回到路由組件a時，之前的DOM操作就沒有了衣赶，得重新進行诊赊。如果你的應(yīng)用里有一個購物車組件厚满，就需要用到keep-alive府瞄。
<transition>
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
一些小需求怎么實現(xiàn)
不同路由不同頁面標(biāo)題
多頁面應(yīng)用我們可以給每一個頁面都設(shè)置一個不同的標(biāo)題，但是如果是單頁面應(yīng)用的路由呢碘箍？其實也是可以實現(xiàn)的遵馆，實現(xiàn)的方法不止一種，我之前用的是結(jié)合命名路由和導(dǎo)航鉤子函數(shù)的方法丰榴。如下：
// 定義路由的時候如下定義货邓，name也可為中文
const routes = [
{ path: '/goods', component: goods, name: 'goods' },
{ path: '/ratings', component: ratings, name: 'ratings' },
{ 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;
})
命名路由
既然用到了命名路由四濒，這里就提一下吧换况。命名路由就是用一個名稱來標(biāo)識一個路由，在定義路由的時候設(shè)置一個name屬性即可盗蟆。在router-link中也可以用路由的名字來鏈接到一個路由戈二。
<router-link :to="{ name: 'seller'}">seller</router-link>
導(dǎo)航鉤子
這個我還沒怎么用過，它主要是用來攔截導(dǎo)航的喳资，想使用的參考官方文檔吧觉吭。
怎么剛進入應(yīng)用就渲染某個路由組件
剛進入應(yīng)用都是進入到“/”這個路由的，如果想直接進入到“/goods”怎么辦仆邓，這里提供兩種方法鲜滩。一種是利用重定向，另一種是利用vue-router的導(dǎo)航式編程节值。
重定向
const routes = [
{ path: '/', redirect: '/goods'}
]
是不是很簡單呢徙硅？重定向的目標(biāo)也可以是一個命名的路由。
const routes = [
{ path: '/', redirect: { name: 'goods' }}
]
導(dǎo)航式編程
利用vue-router的導(dǎo)航式編程的router.push方法也可以實現(xiàn)上面的需求搞疗。
// 在創(chuàng)建vue實例并掛載后調(diào)用
router.push('/goods')
router.push方法就是用來動態(tài)導(dǎo)航到不同的鏈接的嗓蘑。它會向history棧添加一個新的記錄，點擊<router-link :to="...">等同于調(diào)用router.push(...)。
vue-router中還有router.replace方法和router.go方法脐往，概念及用法可參考https://router.vuejs.org/zh-cn/essentials/navigation.html休吠。
