路由守卫的参数to,from,next是什么？怎么用？

是什么？

1. to：这是一个表示用户试图进入的目标路由的路由对象。to 包含了有关目标路由的信息，如路径、参数、查询参数等。你可以使用这个参数来检查用户试图访问的目标路由，并基于这些信息决定是否允许访问。

2. from：这是一个表示用户当前所在的路由的路由对象。from 包含了有关当前路由的信息，如路径、参数、查询参数等。你可以使用这个参数来执行一些操作，例如记录用户从哪个路由来。

3. next：这是一个函数，用于控制导航行为。你必须调用 next 来告诉 Vue Router 是否允许用户进入目标路由，以及在何种情况下允许。next 可以接受一个参数，它可以是一个字符串，也可以是一个路由对象，用于指定用户应该导航到哪个路由。

   • 如果调用 next()，表示允许用户进入目标路由。
   • 如果调用 next(false)，表示阻止用户导航，保持在当前路由。
   • 如果调用 next('/some-route')，表示重定向到指定路由。
   • 如果调用 next(error)，表示导航被取消，并且可以传递一个错误对象以提供详细信息。

怎么用？：

比如：全局前置守卫做登录验证 

//路由表
const routes = [路由配置]
//构建路由对象
const routers = new Router({
    routes
});

// 写全局前置守卫
// to当前即将要进入的路由对象
routers.beforeEach((to, from, next) => {
    //如果当前的访问的请求是Login放行
    if (to.path === '/Login') {
        console.log(to);
        console.log(to.path);
        next();
    }
    else {
        //其余访问请求判断用户是否登录
        if (!isLoggedIn()) {
            console.log(to);
            console.log(to.meta);
            console.log("抱歉你未登录");
            next({ path: '/Login' }); // 如果用户未登录，则重定向到登录页面
        } else {
            next();
        }
    }
})
//登录验证函数
function isLoggedIn() {
    console.log("进入路由守卫");
    // 在这里实现检查用户是否已登录的逻辑，例如检查是否有有效的令牌或会话
    // 如果已登录，返回true，否则返回false
    const user = sessionStorage.getItem('user'); // 从sessionStorage中获取会话信息
    return user !== null; // 如果会话信息存在，则用户已登录
}

//导出路由对象 便于在main.js导入
export default routers;