(一)vue-router 中的参数
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
const routes = [
{
path: '/hello/:id',
props: true, // 将 id 作为props
// props 可以是对象
// props: {
// id: 123
// },
// props 可以是函数
// props: (route) => {
// return { id: route.query.id }
// },
name: 'HelloWorld',
component: HelloWorld,
// 路由携带的一些信息 都写在meta中
meta: {
pv: {
page_name: 'hello world',
page_type: 'activity'
},
title: 'hello world page'
}
}
]
export default new Router({
routes, // 路由定义数组
mode: 'hash', // 路由模式,有 hash / history 两种模式
base: '/', // 路由前缀
})
(二)路由导航守卫
(1)全局路由守卫:
beforeEach
afterEach
(2)独享路由守卫:
beforeEnter
(3)组件内部的守卫
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
(1) router.beforeEach
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Test from '@/components/Test'
Vue.use(Router)
const routes = [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
// 路由携带的一些信息 都写在meta中
meta: {
pv: {
page_name: 'hello world',
page_type: 'activity'
},
title: 'hello world page'
}
}, {
path: '/test',
name: 'Test',
component: Test,
// 路由携带的一些信息 都写在meta中
meta: {
pv: {
page_name: 'test',
page_type: 'activity'
},
title: 'test Page'
}
}
]
// new Router 赋给一个值 该值可以调用路由守卫
const router = new Router({
routes,
mode: 'hash',
base: '/',
})
// 路由守卫 beforeEach 传入一个函数
router.beforeEach((to, from, next) => {
console.log('to', to)
console.log('from', from)
next() // 继续向下执行 不写next, 路由不会跳转的
})
export default router
当页面通过 router-link 方法从 / 跳转到 /test?activityId=12&userId=12 时,会触发路由守卫
可以看出 meta、query、params这几个参数还是很重要的
比如我们更改页面 title
router.beforeEach((to, from, next) => {
console.log('to', to)
console.log('from', from)
document.title = to.meta.title // 更改页面title
next()
})
可以在路由守卫的时候做一些操作,写在beforeEach 函数里,执行完这些操作再 next 跳转
router.beforeEach((to, from, next) => {
if (to.fullPath === '/') {
next('/test')
}
next()
})
next 里面可以传参数,'/' 或者 { name : Test } 等
注意:路由守卫常用于路由跳转判断是否需要登录等,如果需要就跳转到登录页面
(2)router.afterEach
跳转之后触发某些操作
router.afterEach((to, from) => {
console.log('jump finished')
console.log('to', to)
console.log('from', from)
})
(3)独享守卫
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Test from '@/components/Test'
Vue.use(Router)
const routes = [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
meta: {
pv: {
page_name: 'hello world',
page_type: 'activity'
},
title: 'hello world page'
}
}, {
path: '/test',
name: 'Test',
component: Test,
// 独享
beforeEnter: (to, from, next) => {
console.log('own')
document.title = to.meta.title
next()
},
meta: {
pv: {
page_name: 'test',
page_type: 'activity'
},
title: 'test Page'
}
}
]
// new Router 赋给一个值 该值可以调用路由守卫
const router = new Router({
routes,
mode: 'hash',
base: '/',
})
// 全局
router.beforeEach((to, from, next) => {
console.log('beforeEach')
next()
})
// 全局
router.afterEach((to, from) => {
console.log('jump finished')
console.log('to', to)
console.log('from', from)
})
export default router
注意:先执行全局的,再执行自己独享的
(3)组件内部的路由守卫(钩子函数)
<template>
<div>Test</div>
</template>
<script>
export default {
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
console.log('组件内部beforeRouteEnter')
next()
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
console.log('组件内部 beforeRouteUpdate')
next()
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
console.log('组件内部 beforeRouteLeave')
next()
}
}
</script>
<style>
</style>
画一个图:
beforeRouerLeave:钩子应用,点击返回的时候,弹一个弹窗,问一下 确认要离开嘛?