路由设置了独享守卫，刷新后页面空白，再刷新回到/home页面的问题及解决

最新推荐文章于 2024-06-22 14:33:41 发布

traceyW

最新推荐文章于 2024-06-22 14:33:41 发布

阅读量832

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/traceyW/article/details/128218506

版权

本文详细介绍了在Vue.js项目中，为'/trade'页面设置路由独享守卫以限制仅能从购物车页面进入后，遇到刷新页面变为空白并重定向至/home的问题。在查找问题过程中发现，刷新时路由默认从'/'跳转到'/trade'，导致守卫逻辑失效。最终解决方案是在守卫判断条件中添加|| from.path === '/'，以处理刷新时的情况，同时确保从首页不能直接访问'/trade'，因为已对'/'做了重定向到'/home'的设置。

摘要由CSDN通过智能技术生成

一、功能概述：在项目的‘/trade’交易页面，设置了路由独享守卫，用户只能从购物车页面进入交易页面，无法从其他页面进入，实现代码如下：

{
    path: '/trade',
    component: () => import('@/views/Trade/TradeView.vue'),
    meta: { footershow: true, keepAlive: true },
    name: 'trade',
    // 路由独享守卫
    beforeEnter: (to, from, next) => {
      if (from.path === '/cart/checkCart') {
        next()
      } else {
        next(false)
      }
    }
  },

二、出现问题：每次刷新trade页面后，交易页面会变成空白，再次刷新回到/home主页。

三、查找问题：输出每种情况的from.path和to.path：

    beforeEnter: (to, from, next) => {
      if (from.path === '/cart/checkCart') {
        console.log('from:' + from.path) // 输出：from:/cart/checkCart
        console.log('to:' + to.path) // 输出：to:/trade
        nex