Vue用法指南04（路由router的用法）
今天來聊一聊vue-router。
我們先來看一個最基本的配置。
// 建立一個路由
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
// 使用一個路由
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
最後再通過<router-view/>元件來渲染路由。
但是通常我們會給<router-view/>加一個transition轉場動畫。
接下來說幾個router的配置
mode: 'history'
路由預設採用的形式是雜湊路由，也就是url後面會加#/，可把mode設為history，就是我們平常所看到的網頁的那種形式。
linkActiveClass，linkExactActiveClass
我們在頁面上用router-link做跳轉的時候，實際上是vue封裝的一個a標籤，當點選，以及路由匹配的時候，會給a標籤加上特殊的class，我們可以通過linkActiveClass，linkExactActiveClass這兩個屬性做一些全域性的配置。（有時候會用到，但是並不常見）
scrollBehavior
路由跳轉時頁面要不要滾動。(在一些特殊情況下，會用到)
scrollBehavior(to, from, savePosition) {
if (savePosition) {
return savedPosition
} else {
return { x: 0, y:0}
}
}
fallback
如果有的瀏覽器不支援history模式，會自動變成雜湊的模式（fallback: true）
meta
meta有兩個作用，一個是seo，比如設定titile之類的資訊，還有一個作用是許可權的校驗，這個在後面路由守衛再講。
下面說說routes數組裡面的配置
path: 路勁，可配置動態路勁，比如path: '/user/:id'
name: 路由的名字
我們路由跳轉的時候，有兩種方式。
// 通過router-link元件
<router-link to="test">to test</router-link>
// 手動跳轉
this.$router.push('/test')
上面是通過path路勁來跳轉的，其實我們也可以通過name來跳轉
// 通過router-link元件
<router-link :to="{name: 'test'}">to test</router-link>
// 手動跳轉
this.$router.push({name: 'test'})
而且，如果我們需要動態的給路由傳遞一些引數，就只能通過name來跳轉。
this.$router.push({name:'test', query: { id: '1'}})
this.$router.push({name:'test', param: { id: '1'}})
query和param的區別，其實類似於get和post的區別，前者引數會顯示在url上，後者不會。
我們也可以給路由的傳參做一些限定
比如設定props屬性（props: { default: true, sidebar: false }）
component元件，這裡我們可以通過懶載入的方式引入，比如用require.ensure的方式或者import的方式。
再來說一說路由守衛。
顧名思義，路由守衛就是在我們路由跳轉或者解析之前，以及之後做的一個鉤子函式，我們可以通過路由守衛來做一些控制。
路由守衛有前置守衛，解析守衛，後置鉤子，但我們一般用的比較多的是前置守衛，以及解析守衛。
舉個例子：
比方說，我們現在有10個路由，其中有些需要校驗使用者是否登入，如果已登入則可以直接訪問，如果未登入則跳轉到登入頁面，有些無需校驗則可以直接訪問。
常見的一種做法是
我們給路由設定meta資訊
meta: {
checkLogin: ture
}
然後設定全域性的前置守衛，然後再裡面去判斷使用者是否登入
router.beforeEach((to, from, next) => {
if (to.meta.checkLogin) {
// 檢視是否有userData
if (store.state.userData) {
// 重新獲取個人資訊
axios.defaults.headers.common['accesstoken'] = store.state.accessToken;
// 重新更新個人資訊
axios.post('/api/person/info', {})
.then((res) => {
// console.log(JSON.stringify(res.data.data))
if (res.data.code == 20000) {
store.commit('SET_USERDATA', res.data.data)
}
})
.catch((err) => {
console.log(err);
})
next()
} else {
next({
path: '/',
query: {
redirect: to.fullPath
}
})
}
} else {
next({
path: '/',
query: {
redirect: to.fullPath
}
}
})