vue3动态路由刷新后空白或者404问题的解决

目录
  • 前言
  • 实现
  • 登出页面需要清除缓存
  • 排错过程
  • 总结

前言

之前用vue+ant-design-vue写了一个动态路由的页面,更新看一下不能用了555~~~

之前用的组件版本不知道了,回退也不知道哪个版本合适,就是用"vue": "^3.2.13" , "vue-router": "^4.0.3","vuex": "^4.0.0",ant-design-vue": "^3.2.5"重新写一个吧。

本文章是看了其它杂七杂八的博客,自己排错后编写下,不容易啊

实现

1.首先在store\index.js文件编写

import { createStore } from 'vuex'

export default createStore({
  state: {
    menu_lists: []  //菜单
  },
  getters: {
    account(state) {
      return state.menu_lists  // 读取菜单列表
    }
  },
  mutations: {
    // 增加菜单
    menuAdd(state, n) {
      if (state.menu_lists.length == 0) {
        state.menu_lists.push(n)
      } else {
        if (state.menu_lists.some(menu => menu.name != n.name)) {
          state.menu_lists.push(n)
        }
      }
    },
    // 清空菜单
    menuDelect(state) {
      state.menu_lists.length = 0
    }
  },
  actions: {
    menu_add({ commit }, data) {
      commit('menuAdd', data)
    },
	// 登出时调用将菜单数据删除
    menu_delect({ commit }) {
      commit('menuDelect')
    }
  },
  modules: {
  }
})

2.接着在App.vue编写

原因: 刷新时,动态路由需要重新挂载到路由实例, 但是在App.vue中调用init方法去初始化,并不能解决,因为App.vue属于路由的根,还未进入就被通配符拦截到404页面了, 我就在根上退出时将菜单保存在sessionStorage

// 创建完毕状态
  created() {
//在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
    }
    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.removeItem("store");
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });
 }

3.读取后端菜单文件进行处理下

根据实际修改

vueRouter4中移除了addRouters,所以只能通过addRouter进行路由的动态添加

import { useRouter } from "vue-router";
import { useStore } from "vuex";
export default defineComponent({
    setup() {
    const store = useStore();
    const router = useRouter();
        // 路由数据重新封装
    function routerPackag(routers) {
      let accessedRouters = routers.filter((itemRouter) => {
        if (itemRouter.component != "Layout") {
          //处理组件---重点
          router.addRoute("base", {
            path: `/${itemRouter.path}`,
            name: itemRouter.name,
            component: () => import(`@/${itemRouter.component}`),
          });
          // 通过sessionStorage排查菜单是否存储,避免刷新后重复添加
          if (!sessionStorage.getItem("store")) {
            store.dispatch("menu_add", itemRouter);
          }
        }
        //存在子集
        if (itemRouter.children && itemRouter.children.length) {
          routerPackag(itemRouter.children);
        }
        return true;
      });
      return accessedRouters;
    }
   }
)}

4.主要的来了,可以main或者router\index编写(我是在router\index编写的)

1、刷新404:将匹配全部为定义路径到404的路由从静态路由表中去除,在动态权限路由都添加了之后在添加。

2、刷新白屏:如果是在路由守卫router.beforeEach中检测并用router.addRoute添加的路由,则需要将动态权限路由添加后的next()放行,改为next({ path: ${to.path} })触发新导航。

import { createRouter, createWebHashHistory } from 'vue-router'
import store from "../store";
import { ref } from 'vue'
const routes = [
  {
    path: '/login',
    name: 'login',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import( /* webpackChunkName: "Login" */ '../views/ant_login.vue'),
    meta: {
      requireAuth: false,
    },
  },
  {
    path: '/',
    name: 'base',

    component: () => import( /* webpackChunkName: "Login" */ '../views/ant_base.vue'),
    meta: {
      requireAuth: true,
    },
    children: [
      {
        path: 'index',
        name: 'home',
        redirect: "/map",
        component: () => import( /* webpackChunkName: "Login" */ '../views/ant_home.vue'),
      }
    ]
  },
  {
    name: "NotFont",
    path: '/:pathMatch(.*)*',
    component: () => import('../components/NotFont.vue'),
    alias: '/404', // 别名
    hideMenu: true
  }
]

const router = createRouter({
  history: createWebHashHistory(), //createWebHashHistory是hash模式
  // 页面刷新白屏问题
  // mode取值说明:
  // histroy:URL就像正常的 url,示例:http://localhost:8080/home
  // hash:默认值,会多一个“#”,示例:http://localhost:8080/#/home
  // abstract”:url不变示例:http://localhost:8080
  // mode: 'history',
  base: process.env.BASE_URL,
  routes
})
// 下面全局前置路由守卫可在main文件编写
const registerRouteFresh = ref(true) // 定义标识,记录路由是否添加
router.beforeEach(async (to, from, next) => {
  if (registerRouteFresh.value && store.state.menu_lists.length > 0) {
    router.removeRoute("NotFont")
    await store.state.menu_lists.forEach(e => {
      //
      // 处理组件---重点
      router.addRoute("base", {
        path: `/${e.path}`,
        name: e.name,
        component: () => import(`@/${e.component}`),
      });
    })
    registerRouteFresh.value = false
    // next({ ...to, replace: true })
    next({
      path: `${to.path}`
    })
  } else {
    router.addRoute(router.options.routes[2])
    next()
  }
})

// 全局后置钩子-常用于结束动画等
router.afterEach(() => {
  //不接受next
});
export default router

登出页面需要清除缓存

import { useStore } from "vuex";
export default defineComponent({
    setup() {
    const store = useStore()
    function Logout() {
    // 将vuex的菜单数据删除
    store.dispatch("menu_delect");
       window.sessionStorage.clear()
   }
)}

排错过程

心累不说看了那些博客了真是大海捞个针,博客太杂了,有的写的next({ …to, replace: true })我就想知道你是咋成功的,哎,排的有好的但不实用,排到垃圾就跟不想说了,连使用的组件都没有就光把一段代码粘贴上去,累累累

总结

到此这篇关于vue3动态路由刷新后空白或者404问题解决的文章就介绍到这了,更多相关vue3刷新空白或404内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue实现远程获取路由与页面刷新导致404错误的解决

    一.背景 先简单介绍一下现在项目情况:前后端分离,后端服务是Java写的,前端是Vue+ElementUI. 最近的一个需求是:通过后端Api去获取前端路由表,原因是每个登录角色对应的前端路由表可能是不一样的(权限问题) 二.遇到的问题 因为前端Vue+ElementUI项目是单页应用--即只有一个index.html页面,如果路由从远程获取的话,每次F5或点击刷新按钮刷新页面的时候,就会找不到对应的路径而报404错误 三.解决方案 1.通过api远程获取路由,然后在前端生成对应路由 /* 将

  • vue下history模式刷新后404错误解决方法

    本文介绍了vue下history模式刷新后404错误解决方法,分享给大家,具体如下: 官方说明文档: https://router.vuejs.org/zh/guide/essentials/history-mode.html 一. 实测 Linux 系统 Apache 配置: 更改站点配置文件即可,我这里在 Directory 标签后面添加了官方给的五行配置 <VirtualHost *:80> #Created by linvic on 2018-05-24 Serveradmin 674

  • 解决vue打包项目后刷新404的问题

    vue打包项目后刷新404的问题Nginx配置 server { listen 80; server_name localhost; index index.html; root /root/dist; location / { root /root/dist; try_files $uri $uri/ /index.html =404; } } 以上这篇解决vue打包项目后刷新404的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vu

  • Vue3刷新页面报错404的解决方法

    vue-router历史模式 最近在学习Vue3的过程中遇到了一个问题,那就是在写代码的过程中,每当代码发生了变动,页面一刷新,原先的页面就会变成这个样子: 打开控制台一看: 这时候刷新.在浏览器地址栏直接输入地址也不管用. 每次写一点代码,都不能及时看到结果,需要从8080重新进入才可以,其中的崩溃可想而知. 此时判断应该是路由跳转的问题,于是来到router.js文件看一看: import { createRouter, createWebHistory } from 'vue-router

  • vue框架下部署上线后刷新报404问题的解决方案(推荐)

    <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule> nginx配置 location / { try_files $uri $uri/

  • Vue下路由History模式打包后页面空白的解决方法

    vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息. 这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官方有解释,需要加一个base // base: '/history', // mode: 'his

  • vue3动态路由刷新后空白或者404问题的解决

    目录 前言 实现 登出页面需要清除缓存 排错过程 总结 前言 之前用vue+ant-design-vue写了一个动态路由的页面,更新看一下不能用了555~~~ 之前用的组件版本不知道了,回退也不知道哪个版本合适,就是用"vue": "^3.2.13" , "vue-router": "^4.0.3","vuex": "^4.0.0",ant-design-vue": "

  • 五步教你用Nginx部署Vue项目及解决动态路由刷新404问题

    目录 步骤一:改端口 步骤二: 打包 步骤三:将dist文件夹上传到服务器上 步骤四:修改nginx.conf(重中之重) 步骤五:重启nginx 总结 期末月前本来部署过一次,昨天部署的时候发现又给忘了,而且出了很多问题,在这统一汇总一下. 步骤一:改端口 在vue.config.js下的devServer把host改成服务器的地址 步骤二: 打包 用npm run build打包,最后是这样的,并且目录下多了个dist文件夹 步骤三:将dist文件夹上传到服务器上 我用的xshell,没办法

  • vue3动态修改打包后的请求路径的操作代码

    在工作中多多少少会遇到这种情况:项目打包之后,可以再次修改请求后端接口的基础地址.这就需要我们创建一个静态资源里的外部文件来实现了. 具体操作实现 public 文件夹就是存放那些不需要打包的文件,可以直接访问(静态资源),在puclic目录下新增config.js文件 window.g = { // 开发环境 development: { BASEURL: 'http://127.0.0.1:4000', VERSION: '0.0.1', MODE: 'development', NODE_

  • Vue Router 实现动态路由和常见问题及解决方法

    个人理解:动态路由不同于常见的静态路由,可以根据不同的「因素」而改变站点路由列表.常见的动态路由大都是用来实现:多用户权限系统不同用户展示不同导航菜单. 如何利用Vue Router 实现动态路由 Vue项目实现动态路由的方式大体可分为两种: 前端将全部路由规定好,登录时根据用户角色权限来动态展示路由: 路由存储在数据库中,前端通过接口获取当前用户对应路由列表并进行渲染: 第一种方式在很多Vue UI Admin上都实现了,可以去读一下他们的源码理解具体的实现思路,这里就不过多展开.第二种方式现

  • 如何利用Vue3管理系统实现动态路由和动态侧边菜单栏

    目录 前言 动态路由 动态侧边菜单栏 总结 前言 在做Vue管理系统的时候,都会遇到的一个需求:每个用户的权限是不一样的,那么他可以访问的页面(路由),可以操作的菜单选项是不一样的,如果由后端控制,我们前端需要去实现动态路由,动态渲染侧边菜单栏. 动态路由 在本示例管理系统中,由于每个用户的权限不一样,拥有的可以访问的路由页面也不一样,用户能访问的路由页面都是后端根据权限动态配置的 我们前端需要根据后端接口返回的路由表去动态增删路由,从而生成这个用户所拥有的路由. 重点:实现动态路由api ro

  • Vue刷新后页面数据丢失问题的解决过程

    目录 一.为什么刷新后数据会丢失 二.解决思路 三.解决方法 四.总结 总结 一.为什么刷新后数据会丢失 vuex存储的数据只是在页面中,相当于全局变量,页面刷新的时候vuex里的数据会重新初始化,导致数据丢失.因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,vuex里面的数据就会被重新赋值. 二.解决思路 办法一:将vuex中的数据直接保存到浏览器缓存中(sessionStorage.localStorage.cookie) 办法二:在页面刷新的时候再次请求远

  • Nacos+Spring Cloud Gateway动态路由配置实现步骤

    目录 前言 一.Nacos环境准备 1.启动Nacos配置中心并创建路由配置 2.连接Nacos配置中心 二.项目构建 1.项目结构 2.编写测试代码 三.测试动态网关配置 1.启动服务,观察注册中心 2.访问网关,观察服务日志 四.总结 前言 Nacos最近项目一直在使用,其简单灵活,支持更细粒度的命令空间,分组等为麻烦复杂的环境切换提供了方便:同时也很好支持动态路由的配置,只需要简单的几步即可.在国产的注册中心.配置中心中比较突出,容易上手,本文通过gateway.nacos-consume

  • 使用sessionStorage解决vuex在页面刷新后数据被清除的问题

    1.原因 2.解决方法 localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器关闭时会话结束,有时间期限,具有自行百度 我这里使用sessionStorage,这里需要注意的是vuex中的变量是响应式的,而sessionStorage不是,当你改变vuex中的状态,组件会检测到改变,而sessionStorage就不会了,页面要重新刷新才可以看到改变,所以应让vuex中的状态从sessionStorage中得到,这样组件就可以响应式的变化 3.具体实现

  • 基于vue 动态菜单 刷新空白问题的解决

    1.先确认自己在route.js 或者 main.js 中有没有使用 路由守卫vue.beforeEach和vue.addRouters() 促使页面每次刷新,重新根据后台返回数据生成动态路由,就像你在登陆时做的事情一样. 代码示范注意点: //注意:确定自己避免了路由守卫进入死循环 let oneRun = true; //通过oneRun变量控制 避免陷入死循环 router.beforeEach((to,from,next)=>{ if(oneRun){ oneRun = false;//

随机推荐