new Router 配置項(xiàng)
mode
hash / histoty
配置路由 history 模式
作為有服務(wù)端渲染的應(yīng)用叼耙，不希望有 #睦番，上述是 hash 模式雇盖，# 更多是用來做定位的屑墨，同時它不會被搜索引擎解析棺滞，導(dǎo)致網(wǎng)站 SEO 效果不好。
在 router options 中使用 mode: 'history'
export default () => {
return new Router({
routes,
mode: 'history' // 默認(rèn) hash 模式
})
}
base
頁面基礎(chǔ)路徑
設(shè)置之后苟径，使用 vue-router api 進(jìn)行跳轉(zhuǎn) 都會加上這個 base 路徑
export default () => {
return new Router({
routes,
mode: 'history',
base: '/base/' // 兩邊斜杠要加
})
}
linkActiveClass 和 linkExactActiveClass
// app.vue
<template>
<div id="app">
<router-link to="/app">app</router-link>
<router-link to="/login">login</router-link>
<router-view />
</div>
</template>
此時案站，控制臺對應(yīng)的 a標(biāo)簽顯示
<a data-v-06ebb29e="" href="/base/app" class="router-link-exact-active router-link-active">app</a>
對 class 進(jìn)行配置
// router.js
export default () => {
return new Router({
routes,
mode: 'history',
base: '/base/',
linkActiveClass: 'active-link',
linkExactActiveClass: 'exact-active-link'
})
}
配置之后的 a 的 class，就是配置的值棘街。
<a data-v-06ebb29e="" href="/base/app" class="exact-active-link active-link">app</a>
區(qū)別
添加一個新路由 /login/exact
// client/config/routes.js
export default [
{
path: '/login',
component: Login
},
{
path: '/login/exact',
component: Login
}
]
// client/app.vue
<template>
<div id="app">
<router-link to="/login">login</router-link>
<router-link to="/login/exact">login exact</router-link>
</div>
</template>
當(dāng)點(diǎn)擊 login 鏈接時蟆盐，跳轉(zhuǎn)到 login 頁面承边，此時 login 和 login exact 鏈接標(biāo)簽，login 有兩個 class石挂。
<a data-v-06ebb29e="" href="/base/login" class="exact-active-link active-link">login</a>
<a data-v-06ebb29e="" href="/base/login/exact" class="">login exact</a>
當(dāng)點(diǎn)擊 login exact 鏈接時博助，此時 login 和 login exact 鏈接標(biāo)簽，login 有一個 class痹愚，login exact 有兩個 class富岳。
<a data-v-06ebb29e="" href="/base/login" class="active-link">login</a>
<a data-v-06ebb29e="" href="/base/login/exact" class="exact-active-link active-link">login exact</a>
vue-router 認(rèn)為只有路由真正匹配時，才會加上 exact-active-link 這個 class里伯，如果只有一部分重合城瞎，就會加上 active-link。
scrollBehavior
頁面跳轉(zhuǎn)后疾瓮，頁面是否滾動脖镀。
// router.js
export default () => {
return new Router({
scrollBehavior (to, from, savedPostion) {
if (savedPostion) {
return savedPostion
} else {
return { x: 0, y: 0 }
}
}
})
}
parseQuery 和 stringifyQuery
定制 query 信息
vue 會默認(rèn)處理，如果有特定需求狼电，可以借助這兩個配置項(xiàng)蜒灰。
// router.js
export default () => {
return new Router({
parseQuery (query) {},
stringifyQuery (obj) {}
})
}
fallback
不是所有瀏覽器都支持前端路由的方式，如果不支持肩碟，設(shè)置 fallback: true强窖，vue 會自動 fallback 到 hash 模式。
路由配置
路由命名 name
name 和 path 可以沒有關(guān)系削祈，可以通過 name 來進(jìn)行路由的跳轉(zhuǎn)翅溺。
沒使用之前
// client/config/routes.js
export default [
{
path: '/app',
component: Todo
}
]
// app.vue
<template>
<div id="app">
<router-link to="/app">app</router-link>
</div>
</template>
使用后，效果和使用路徑相同髓抑。
// client/config/routes.js
export default [
{
path: '/app',
component: Todo,
name: 'app'
}
]
// app.vue
<template>
<div id="app">
<router-link :to="{name: 'app'}">app</router-link> // 注意, v-bind:to
</div>
</template>
路由元信息 meta
和 HTML 中 header 部分的 meta 頁面原信息類似咙崎，例如 description 有助于 seo 等，一般和路由沒什么關(guān)系的配置可以寫在這吨拍。
// client/config/routes.js
export default [
{
path: '/app',
component: Todo,
name: 'app',
meta: {
title: 'this is app',
description: 'xxx'
}
}
]
子路由 children
嵌套路由
// client/config/routes.js
import Todo from '../views/todo/todo.vue'
import Login from '../views/login/login.vue'
export default [
{
path: '/app',
component: Todo,
},
children: [ // 在 app 路由下褪猛，添加子路由
{
path: 'test',
component: Login
}
]
}
]
// client/views/todo/todo.vue
<template>
<section class="real-app">
<router-view /> // 子路由使用，需要再上一級路由頁面加上 router-view 顯示羹饰。
</section>
</template>
給 router-view 加 transition
給所有路由切換加個過渡效果伊滋。
// client/app.vue
<template>
<div id="app">
<transition name="fade"> // 使用 name
<router-view />
</transition>
</div>
</template>
/* client/assets/styles/global.styl */
.fade-enter-active, .fade-leave-acitve /* fade- */
transition: opacity 0.3s
.fade-enter, .fade-leave-to
opacity : 0
