假设用户登录,在地址栏输入了Login,人性化的设计应该自动回到home页面。或者用户输入不存在路由,也应该回到home页面。
这个时候需要用到vue-router的导航守卫功能。
在我们封装的router.js文件下添加router.beforeEach……
const router = createRouter({ ... }) router.beforeEach((to, from,next) => { // ... // 返回 false 以取消导航 return false })
有三个参数,to,from,next。分别代表的意思是
to:要前往的路由
from:当前所在的路由
next:设置接下来要跳转的路由。如果没参数就执行当前的匹配路由,如果有参数相当于要重新跳转的路由
简单来说。就是我要从from跳转到to。所以from一般不怎么需要管,谁在乎你当前页面是啥呢。主要还是判断你要跳转的页面你是否有权限进去。
to,from的参数是一样的,需要关注的参数有 name,path,matched。name和path就是你创建的路由规则里面设置的,我没有设置name,所以我的代码会通过path来判断。matched是判断你要跳转的路由是否可以匹配你的路由规则。再简单点说,我有两个路由配置如下
const routes = [ { path: '/', component: Home }, { path: '/Login', component: Login } ]
如果我在地址栏输入http://XXX.com/Login 那么to.matched.length>0。matched是个数组类型。如果可以匹配到你的路由配置那就有值。
如果我在地址栏输入http://XXX.com/nb 可见我的路由配置没有nb这个地址,那么我们就要在导航守卫里判断,让他进入到我们的Home页面。
同理,判断登录状态也是如此,如果我要前往一个页面,但是我的登录状态是false,那就不能跳转过去,就要将其改为Login登录页。
需要用到的是next('/Login')。
下面是我的导航守卫配置
//导航守卫 router.beforeEach((to, from, next) => { const isLogin = localStorage.getItem('isLogin') ?? false; if (isLogin) { // 用户已登录 if (to.path.toLowerCase() === '/login') { // 如果已登录且要前往登录页,重定向到主页 next('/'); } else { if (to.matched.length !== 0) { next(); } else { next('/'); } } } else { // 用户未登录,重定向到登录页 if (to.path.toLowerCase() !== '/login') { next('/Login'); } // 已在登录页,正常导航 next(); } })
需要注意几点。就是用户如果输入LoGiN。在代码中,是属于!=Login的,所以我在代码中,将其都转为小写了。toLowerCase()。
最新的vue-router中,跳转路由的写法变了。包括vue3也是好多写法都改变了
假设以前我登录成功,跳转路由的写法是:this.$router.push('/Home')。
现在写法稍微不同。需要在你的vue页面导入useRouter。然后push。
直接上代码演示
import { useRouter } from 'vue-router' //首先在setup中定义 const router = useRouter() //跳转 router.push(`/Home`)
和原来的写法似乎也差不多,但是新手,比如我,hhh,总归是会踩坑的,所以记录下
标签:登录,vue3,next,守卫,跳转,router,Login,路由 From: https://www.cnblogs.com/zhang-3/p/17663239.html