Vue 路由 路由守卫

路由守卫
正如其名, vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。简单来说,就是在路由跳转
时候的一些钩子,当从一个页面跳转到另一个页面时,可以在跳转前、中、后做一些事情。
当你打开一个页面的前后需要去干什么。
每个守卫方法接收参数:

  • to:即将要进入的目标,是一个路由对象
  • from:当前导航正要离开的路由,也是一个路由对象
  • next:可选,是一个方法,直接进入下一个路由

你可以使用 router.beforeEach 注册一个全局前置守卫,当一个导航触发时,就会异步执行这个回调函数。

to是指从哪个页面来,from代表从根目录来。to:从哪来 from:到哪去

复制代码
//2.创建路由实例并传递上面路由对象routes
    const router = createRouter({
//路由的一种前端展现方式,通常使用这个就行了
        history: createWebHistory(),
        routes
  }
)

//定义前置路由守卫。进入某个页面之前需要干什么
router.beforeEach((to,from,next) => {
    console.log(to)
    console.log(from)
})
Go 复制代码
router.beforeEach((to, from, next) => {
//如果用户访问登录页,直接放行
    if(to.path == '/login') {
        return next()
}

const token = '' //模拟token,正常是从本地cookie或localstorage中获取

if (token) {
    return next() //如果有token,则正常跳转访问
} else {
    return next('/login') //如果没有token,跳转到登录页
}
})

一.全局守卫

1.全局前置守卫

语法:

复制代码
 router.beforeEach((to,from,next)=>{})

参数说明:
to :进入到哪个路由去
from :从哪个路由离开
next:函数,决定是否展示你要看到的路由页面。

示例:

main.js 中设置全局守卫

  • 在main.js中,有一个路由实例化对象router。在main.js中设置守卫已是全局守卫。

  • 如下,判断to.path当前将要进入的路径是否为登录或注册,如果是就执行next(),展示当前界面。如果不是,就弹出alert,然后移至登录界面。

  • 这样就可实现,用户在未登录状态下,展示的一直是登录界面。

    router.beforeEach((to,from,next)=>{
    if(to.path == '/login' || to.path == '/register'){
    next();
    }else{
    alert('您还没有登录,请先登录');
    next('/login');
    }})

相关推荐
会飞的鱼先生几秒前
Vue3的内置组件 -实现过渡动画 TransitionGroup
前端·javascript·vue.js·vue
秋天的一阵风6 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-上)
前端·vue.js·面试
秋天的一阵风7 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-下)
前端·vue.js·面试
JustHappy31 分钟前
啥是Hooks?为啥要用Hooks?Hooks该怎么用?像是Vue中的什么?React Hooks的使用姿势(上)
前端·vue.js·react.js
海天胜景2 小时前
vue3 el-table 右击
javascript·vue.js·elementui
樊小肆2 小时前
Vue3 在线 PDF 编辑 2.0 缩放拖拽、渲染优化功能解析
前端·vue.js·开源
Java~~2 小时前
山东大学软件学院项目实训-基于大模型的模拟面试系统-网页图片显示问题
javascript·vue.js
冰镇生鲜3 小时前
小程序·安全·胶囊·容器组件
前端·vue.js·uni-app
前端大白话3 小时前
前端人必看!10个Vue3救命技巧,专治性能差、代码乱
前端·javascript·vue.js
爱看书的小沐3 小时前
【小沐学Web3D】three.js 加载三维模型(Svelte.js)
javascript·vue.js·webgl·three.js·opengl·web3d·svelte.js