全局的路由钩子函数:beforeEach
、afterEach
单个的路由钩子函数:beforeEnter
组件内的路由钩子函数:beforeRouteEnter
、beforeRouteLeave
、beforeRouteUpdate
全局导航钩子函数:beforeEach
//vue路由导航守卫控制访问权限
//如果用户没有登录,但是直接通过URL访问特定页面,需要重新导航到登录页面
router.beforeEach((to,from,next)=>{
// to 将要访问的路径
//from 代表从那个路径跳转而来
// next 是一个函数,表示放行
// next() 放行 next('/login') 强制跳转
if(to.path === '/login') return next();
const userInfo = JSON.parse(localStorage.getItem('userinfo'));
if(!userInfo) return next('/login');
next()
})
全局导航钩子函数(afterEach
)
afterEach
和beforeEach
都是属于全局守卫钩子,都是在main.js
中进行调用;其中afterEach
比beforeEach
少一个next参数
to
:即将要进入的路由对象
from
:正要离开的路由对象;
afterEach
我们一般用来重置页面滚动条位置
假如我们有一个页面很长,滚动后其中的某个位置后跳转,这时新的页面滚动条位置
就会在上一个页面停留的位置;这个时候我们就可以利用afterEach来进行重置
//全局路由改变后钩子
router.afterEach((to, from) => {
//将滚动条恢复到最顶端
window.scrollTo(0, 0);
}
路由独享的钩子函数(beforeEnter
)
路由独享顾名思义就是指定的路由才有的钩子函数,通常这类路由独享的钩子函数我们是在路由配置文件中进行配置,只能设置改变前的钩子,不能设置改变后的钩子。
const routes=[
{
path:'/page1',
component:page1,
children: [
{
path: "phone",
component: phone
},
{
path: "computer",
component: computer
},
],
//路由独享的钩子函数
beforeEnter:(to,from,next)=>{
console.log(to);
console.log(from);
next(false);
}
},
];
const router=new VueRouter({
routes
});
上述代码理解为只有进入/page1
才会触发beforeEnter
这个钩子,如果进入其他页面,是不触发的。
组件内的钩子函数
beforeRouteEnter(to,from,next)
在路由进入前调用,因为此时的vue
实例还没有创建,所有beforeRouteEnter
是唯一一个不能使用this
的钩子函数
to
:即将要进入的路由对象
from
:正要离开的路由对象;
next
:路由控制参数
beforeRouteUpdate(to,from,next)
在路由发生修改的时候进行调用,比如动态路由传参,这种情况beforeRouteUpdate
也是
会被调用的;
to
:即将要进入的路由对象
from
:正要离开的路由对象;
next
:路由控制参数
beforeRouteLeave(to,from,next)
在路由离开该组件时调用
to
:即将要进入的路由对象
from
:正要离开的路由对象;
next
:路由控制参数
注意:beforeRouteEnter
因为触发的时候vue
实例还没有创建,所以这个钩子函数中不能使用this
,
而beforeRouteUpdate
和beforeRouteLeave
都是可以访问到实例的,
因为当这两个函数触发的时候实例都已经被创建了;
//路由进入前调用
beforeRouteEnter (to, from, next) {
window.document.title = "欢迎";
next();
},
//路由修改时调用
beforeRouteUpdate(to,from,next){
},
//路由离开时调用
beforeRouteLeave(to,from,next){
},