vue3 路由-导航守卫

假设用户登录，在地址栏输入了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，总归是会踩坑的，所以记录下