正文内容
路由中有三个基本的概念 route, routes, router。
route
:单一路由, Home按钮 => home内容, 这是一条route, about按钮 => about 内容, 这是另一条路由。
routes
:一组路由,把上面的每一条路由组合起来,形成一个数组。[{home 按钮 =>home内容 }, { about按钮 => about 内容}]
router
:是一个机制,相当于一个管理者,它来管理路由。,定义路由只是静止的,当点击完毕后,需要在数组中查询,并且在页面显示出来。
vue-router的三种钩子函数及用处
一、全局钩子函数 beforeEach 和 afterEach
beforeEach 和 afterEach 是vue-router实例对象的属性
注意:每次路由跳转,都会执行beforeEach和afterEach
router.beforeEach
有三个参数:to/from/next
router.beforeEach(function (to,from,next) {
console.log(to);//到达的路由
console.log(next);//管道中,可以跳转到其他路由
console.log(from);//离开的路由
next();
})
注意(next)
next() //正常跳转,不写的话,不会跳转,next(false)取消跳转
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。
next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
router.afterEach
有两个参数:to/from
router.afterEach(function (to,from) {
console.log(to);//