項目中用到了vue-router瘪阁，那么就簡單總結(jié)一下vue-router的使用断盛。
1.vue-router安裝
npm install vue-router --save //也可以通過cnpm安裝
通過vue-cli搭建的框架可以看到在router文件夾中的index.js文件有如下：
import Router from 'vue-router'
Vue.use(Router); //如果使用全局的 script 標(biāo)簽，則無須如此（手動安裝）伙菜。
2. 開始
當(dāng)把vue-router引入項目中命迈，我們要弄清楚的有兩點壶愤。
第一，將組件映射到對應(yīng)的路由娇哆。
第二勃救，組件在哪里渲染。
如下第一個例子：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 組件來導(dǎo)航. -->
<!-- 通過傳入 `to` 屬性指定鏈接. -->
<!-- <router-link> 默認(rèn)會被渲染成一個 `<a>` 標(biāo)簽 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這里 -->
<router-view></router-view>
</div>
如上勃黍，通過router-link組件進行導(dǎo)航覆获，其中的to屬性指定跳轉(zhuǎn)的路由，router-link會被渲染為一個a標(biāo)簽弄息。
如果是模塊化編程，首先要導(dǎo)入vue和vue-router辩块，然后Vue.use(vueRouter)荆永。
import Vue from 'vue'
import Router from 'vue-router'
//這兩個是路由組件具钥，通過import進來
import Index from '@/components/index/Index';
import BlogPage from '@/components/blog/BlogPage';
Vue.use(Router);
export default new Router({
routes:
[
{path: '/index', name: 'IndexPage', component: Index},//可以看到每個路由對應(yīng)一個組件
{path: '/blog', name: 'BlogPage', component: BlogPage}
]
})液兽；
//以上創(chuàng)建了路由實例并且通過export暴露出來。然后創(chuàng)建和掛載根實例宁玫，這樣整個應(yīng)用都具有路由功能柑晒。
const app = new Vue({
router
}).$mount('#app')
3. 動態(tài)路由匹配
在某些情況下我們需要某種模式匹配的路由都映射到同一個組件。
const router = new VueRouter({
routes: [
// 動態(tài)路徑參數(shù) 以冒號開頭
{ path: '/user/:id', component: User }
]
})
如上的動態(tài)路徑佛掖，可以匹配/user/1, /user/2, user/foo涌庭，等一系列這種模式的路由。
當(dāng)匹配到某一個路由的時候拴魄，會將這些參數(shù)存到this.$router.params中席镀。如上匹配的路由參數(shù)，我們可以通過this.$router.params.id進行獲取愉昆。
注意：使用路由參數(shù)時跛溉，如上面的從/user/1跳轉(zhuǎn)到/user/2扮授，原來的組件是會被復(fù)用的刹勃，因為兩個路由都映射的是同一個組件，這樣的設(shè)計是具有一定的高效性的荔仁。不過關(guān)于組件的生命周期的一些鉤子函數(shù)都無法使用了芽死。
我們可以通過watch進行檢測一些路由參數(shù)的變化关贵。
4. 嵌套路由
當(dāng)一個被渲染的組件中可以包含自己的<router-view>。當(dāng)一個被渲染的組件要渲染自己的子組件揖曾，那么需要在路由配置中加上children的配置：
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 當(dāng) /user/:id/profile 匹配成功炭剪，
// UserProfile 會被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 當(dāng) /user/:id/posts 匹配成功
// UserPosts 會被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
})
注意：以/開頭的路徑會被當(dāng)做根路徑, 所以如果在children中的子路由前面加上/就會在地址欄中顯示的是從跟路由顯示的路徑
5.編程式導(dǎo)航
通過使用<router-link>創(chuàng)建 a 標(biāo)簽來定義導(dǎo)航鏈接奴拦，我們還可以借助 router 的實例方法，通過編寫代碼來實現(xiàn)隶糕。
-
router.push(location)
想要導(dǎo)航到不同的 URL，則使用 router.push 方法枚驻。這個方法會向 history 棧添加一個新的記錄株旷，所以晾剖，當(dāng)用戶點擊瀏覽器后退按鈕時，則回到之前的 URL齿尽。
當(dāng)你點擊 <router-link> 時，這個方法會在內(nèi)部調(diào)用绵估，所以說，點擊 <router-link :to="..."> （聲明式 ）等同于調(diào)用 router.push(...)（編程式）形入。
該方法的參數(shù)可以是一個字符串路徑缝左，或者一個描述地址的對象。例如：
// 字符串
router.push('home')
// 對象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 帶查詢參數(shù)蛇数，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
router.replace(location)
跟 router.push 很像少办，唯一的不同就是，它不會向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當(dāng)前的 history 記錄蔓纠。router.go(n)
這個方法的參數(shù)是一個整數(shù)，意思是在 history 記錄中向前或者后退多少步腿倚，類似 window.history.go(n)敷燎。
// 在瀏覽器記錄中前進一步箩言，等同于 history.forward()
router.go(1)
// 后退一步記錄，等同于 history.back()
router.go(-1)
// 前進 3 步記錄
router.go(3)
// 如果 history 記錄不夠用陨收，那就默默地失敗唄
router.go(-100)
router.go(100)
6.命名視圖
有時候想同時（同級）展示多個視圖，而不是嵌套展示拄衰，例如創(chuàng)建一個布局饵骨，有 sidebar（側(cè)導(dǎo)航） 和 main（主內(nèi)容） 兩個視圖，這個時候命名視圖就派上用場了妖混。你可以在界面中擁有多個單獨命名的視圖，而不是只有一個單獨的出口诗越。如果 router-view 沒有設(shè)置名字息堂，那么默認(rèn)為 default。
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
一個視圖使用一個組件渲染床未，因此對于同個路由振坚，多個視圖就需要多個組件渡八。確保正確使用 components 配置（帶上 s）：
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})
7.重定向 和 別名
-
重定向
重定向也是通過 routes 配置來完成，下面例子是從 /a 重定向到 /b：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
//重定向的目標(biāo)也可以是一個命名的路由：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
//甚至是一個方法宏娄，動態(tài)返回重定向目標(biāo)：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: to => {
// 方法接收 目標(biāo)路由 作為參數(shù)
// return 重定向的 字符串路徑/路徑對象
}}
]
})
-
別名
『重定向』的意思是孵坚，當(dāng)用戶訪問 /a時窥淆，URL 將會被替換成 /b，然后匹配路由為 /b忧饭，那么『別名』又是什么呢眷昆？
/a 的別名是 /b，意味著作媚，當(dāng)用戶訪問 /b 時纸泡，URL 會保持為 /b，但是路由匹配則為 /a女揭，就像用戶訪問 /a 一樣。
上面對應(yīng)的路由配置為：
const router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})
關(guān)于vue-router簡單的使用就介紹到此了磷仰，詳細的教程可以去看：
https://router.vuejs.org/zh-cn/essentials/getting-started.html
