Vue-vue-router.js路由－－进级

一：导航钩子

vue-router

全局钩子

router.beforeEach

before

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
// ...
})

before

to: Route

from: Route

next: Function

next

next()

next(false)

from

next('/')

next({ path: '/' })

next

after

before

after

next

router.afterEach(route => {
// ...
})

某个路由独享的钩子

beforeEnter

const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})

before

组件内的钩子

beforeRouteEnter

beforeRouteUpdate

beforeRouteLeave

const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当钩子执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}

beforeRouteEnter

this

next

beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
})
}

beforeRouteLeave

this

leave

next(false)

二：路由元信息

meta

const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
children: [
{
path: 'bar',
component: Bar,
// a meta field
meta: { requiresAuth: true }
}
]
}
]
})

meta

routes

/foo/bar

$route

$route.matched

$route.matched

meta

router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
if (!auth.loggedIn()) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next() // 确保一定要调用 next()
}
})

三：过渡动效

<router-view>

<transition>

<transition>
<router-view></router-view>
</transition>

<transition>

单个路由的过渡

<transition>

const Foo = {
template: `
<transition name="slide">
<div class="foo">...</div>
</transition>
`
}

const Bar = {
template: `
<transition name="fade">
<div class="bar">...</div>
</transition>
`
}

基于路由的动态过渡

<!-- 使用动态的 transition name -->
<transition :name="transitionName">
<router-view></router-view>
</transition>

// 接着在父组件内
// watch $route 决定使用哪种过渡
watch: {
'$route' (to, from) {
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
}
}

四：数据获取

enter

导航完成后获取数据

created

Post

$route.params.id

<template>
<div class="post">
<div class="loading" v-if="loading">
Loading...
</div>

<div v-if="error" class="error">
{{ error }}
</div>

<div v-if="post" class="content">
<h2>{{ post.title }}</h2>
<p>{{ post.body }}</p>
</div>
</div>
</template>

export default {
data () {
return {
loading: false,
post: null,
error: null
}
},
created () {
// 组件创建完后获取数据，
// 此时 data 已经被 observed 了
this.fetchData()
},
watch: {
// 如果路由有变化，会再次执行该方法
'$route': 'fetchData'
},
methods: {
fetchData () {
this.error = this.post = null
this.loading = true
// replace getPost with your data fetching util / API wrapper
getPost(this.$route.params.id, (err, post) => {
this.loading = false
if (err) {
this.error = err.toString()
} else {
this.post = post
}
})
}
}
}

在导航完成前获取数据

beforeRouteEnter

next

export default {
data () {
return {
post: null,
error: null
}
},
beforeRouteEnter (to, from, next) {
getPost(to.params.id, (err, post) =>
if (err) {
// display some global error message
next(false)
} else {
next(vm => {
vm.post = post
})
}
})
},
// 路由改变前，组件就已经渲染完了
// 逻辑稍稍不同
watch: {
$route () {
this.post = null
getPost(this.$route.params.id, (err, post) => {
if (err) {
this.error = err.toString()
} else {
this.post = post
}
})
}
}
}

五：滚动行为

vue-router

scrollBehavior

const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
}
})

scrollBehavior

to

from

savedPosition

popstate

{ x: number, y: number }

{ selector: string }

scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}

savedPosition

scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}

scrollBehavior (to, from, savedPosition) {
if (to.hash) {
return {
selector: to.hash
}
}
}

六：路由懒加载

const Foo = resolve => {
// require.ensure 是 Webpack 的特殊语法，用来设置 code-split point
// （代码分块）
require.ensure(['./Foo.vue'], () => {
resolve(require('./Foo.vue'))
})
}

const Foo = resolve => require(['./Foo.vue'], resolve)

Foo

const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo }
]
})

把组件按组分块

require.ensure

const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')

require.ensure