new Router 配置项
mode
hash / histoty
配置路由 history 模式
作为有服务端渲染的应用，不希望有 #，上述是 hash 模式，# 更多是用来做定位的，同时它不会被搜索引擎解析，导致网站 SEO 效果不好。
在 router options 中使用 mode: 'history'
export default () => {
return new Router({
routes,
mode: 'history' // 默认 hash 模式
})
}
base
页面基础路径
设置之后，使用 vue-router api 进行跳转 都会加上这个 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>
此时，控制台对应的 a标签显示
<a data-v-06ebb29e="" href="/base/app" class="router-link-exact-active router-link-active">app</a>
对 class 进行配置
// 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>
区别
添加一个新路由 /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>
当点击 login 链接时，跳转到 login 页面，此时 login 和 login exact 链接标签，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>
当点击 login exact 链接时，此时 login 和 login exact 链接标签，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 认为只有路由真正匹配时，才会加上 exact-active-link 这个 class，如果只有一部分重合，就会加上 active-link。
scrollBehavior
页面跳转后，页面是否滚动。
// 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 会默认处理，如果有特定需求，可以借助这两个配置项。
// router.js
export default () => {
return new Router({
parseQuery (query) {},
stringifyQuery (obj) {}
})
}
fallback
不是所有浏览器都支持前端路由的方式，如果不支持，设置 fallback: true，vue 会自动 fallback 到 hash 模式。
路由配置
路由命名 name
name 和 path 可以没有关系，可以通过 name 来进行路由的跳转。
没使用之前
// 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 等，一般和路由没什么关系的配置可以写在这。
// 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
网友评论