精华内容
下载资源
问答
  • vue动态路由刷新空白
    2021-08-25 10:39:35

    使用的是PanJiaChen大佬的vue-admin-template模板

    下载大佬的权限管理模板运行正常,自己用来改造刷新就无限循环or页面空白,下面是改造成功的permission.js相关代码

    // !!!自己项目不需要token
    const hasGetUserInfo = store.getters.userInfo
      if (hasGetUserInfo) {
        // 即将要进入的目标 路由对象
        if (to.path === '/login') {
          // if is logged in, redirect to the home page
          next({ path: '/' })
          NProgress.done()
        } else {
          if (store.getters.routes) {
            next()
          } else {
            try {
              store.commit('user/set_router')
              // !!!保证动态路由添加完后再次触发一次路由钩子,避免出现空白页面
              next({ ...to, replace: true })
            } catch (error) {
              // remove token and go to login page to re-login
              // await store.dispatch('user/resetToken')
              Message.error(error || 'Has Error')
              // next(`/login?redirect=${to.path}`)
              next(`/login`)
              NProgress.done()
            }
          }
        }
      }
    

    总结

    • next(**)只要有参数就会触发beforeEach,所以最后的出口一定要是next(),不然会无限循环
    • 如果点击左边导航菜单没反应打印router.options.routes看看,没有值就得把动态路由手动赋上去
    更多相关内容
  • 主要介绍了基于vue 动态菜单 刷新空白问题的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 动态路由刷新空白

    前言:之前项目动态路由都是好的,昨天在项目中加入vuex持久化导致动态路由刷新空白了
    原因:vuex持久化插件导致的

    解决方法:在main.js中的new Vue()中加入created(){ } 然后把你创建动态路由的方法拿过去,这样就可以解决问题了。

    在这里插入图片描述

    展开全文
  • vue动态路由刷新页面空白问题

    千次阅读 2021-01-13 17:05:55
    导言:在vue项目中采用动态添加路由的方式,第一次进入页面会正常显示,但是点击刷新页面后会导致页面空白。原因是登录时写入vuex中的路由数据在刷新页面时被清空了,所以每次渲染页面的时候都要重新执行一下添加...

    导言:在vue项目中采用动态添加路由的方式,第一次进入页面会正常显示,但是点击刷新页面后会导致页面空白。原因是登录时写入vuex中的路由数据在刷新页面时被清空了,所以每次渲染页面的时候都要重新执行一下添加动态路由的方法。

     

    我的解决办法:

    只要在根目录下的main.js中添加红圈里的方法,页面就不会空白了:

    --------

    下图是vuex里动态添加路由的方法:

    展开全文
  • vue3动态路由刷新空白或者404

    千次阅读 热门讨论 2022-06-16 17:43:23
    实测在vue3使用 "ant-design-vue": "^3.2.5",编写动态路由刷新后会空白或者404的解决方法,代码没有最骚只有更骚 读取后端菜单文件进行处理下 主要的来了,可以main或者router\index编写(我是在router\index...

    前言

    之前用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: {
      }
    })
    
    
    
    1. 接着在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));
        });
     }
    
    1. 读取后端菜单文件进行处理下

    根据实际修改
    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;
        }
       }
    )}
    
    1. 主要的来了,可以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 })我就想知道你是咋成功的,哎,排的有好的但不实用,排到垃圾就不想说了,连使用的组件都没有就光把一段代码粘贴上去,累累累😫

    期望

    码友们有啥更简单的方式实现前端动态路由刷新后能正常显示刷新前页面欢迎评论分享

    展开全文
  • 作用:每次页面刷新时都先判断一下动态路由是否添加,若没有,重新添加动态路由。 2、在mutations中完成动态路由添加后,给字段isAddRoutes赋值为true,表明已添加动态路由 //动态添加路由 SET_...
  • vue动态路由刷新白屏问题解决方法
  • Vue动态路由-刷新空白-解决办法 //main.js //"vue-router": "^3.2.0" var tag = true router.beforeEach((to,from,next)=>{ if (tag) { tag = false //这里执行动态添加路由的操作 addRoute(parentName: ...
  • 通常会采用动态添加路由的方法来实现,此方法会在登陆时利用vuex将用户信息以及菜单栏需要展示的菜单路由保存,这样在用户第一次登陆项目时,动态渲染的菜单路由页面一切正常,但是当再次刷新的时候,就会出现白屏...
  • <p style="text-align:center"><img alt=" router.beforeEach方法" height="493" src=...但是刷新页面就空白页,然后又需要清除localStore才可以,麻烦大佬们帮忙看看  </p>
  • 在具体页面中,先通过this.$router.push或this.$router.replace替换路由,随后调用this.$router.go(0),页面就会强制刷新,但是该强制刷新与F5刷新效果类似,页面会有空白时间,体验感不好; provide/inject 首先...
  • vue动态路由刷新丢失解决方案

    千次阅读 2021-11-17 18:32:23
    动态路由添加刷新页面出现空白页面或者404页面 因为界面刷新导致动态路由丢失,所以是空页面或者404 我添加动态路由了怎么还剩刷新依旧是空白页面呢? 因为动态路由添加后需要是新导航才会生效 解决方案 需要...
  • 由于子路由都是动态追加的,当界面刷新的时候,其实我们路由里面并没有该子界面的配置,所以就是404咯,也就是空白咯 在页面刷新时候,在router.beforeEach里面去判断,如果是动态路由而且是第一次加载,则动态追加...
  • vue动态路由刷新页面后出现问题的处理
  • 由于刷新页面vuex数据会丢失,所以动态添加路由这一步也就失效了在通过vuex中的state属性存储路由在sessionStorage中,只是存储了左侧菜单栏展示的信息path地址,但是并没有存进去路由详细信息,比如name,meta值,...
  • router/index.js中只配置登录页面及首页的路径,其他页面在点击菜单时动态添加;...使用vue开发开发工具查询路由确实添加了,但是访问的页面却是一片空白。请问这样写有问题吗?正确的应该怎么写?
  • vue-admin-template 动态路由刷新 页面空白
  • vue动态路由刷新页面空白404解决办法
  • Vue-router的使用和出现空白页 2018.08.28 更新 vue-router:前端路由系统——改变视图的同时不会向后端发出请求 1、 hash 2、history 2018.06.25 更新 get到一个新技能 import Vue from 'vue' import Router from...
  • Vue实现动态路由及登录404页面跳转控制页面刷新空白解决方案.docx
  • vue动态加载路由刷新白屏问题

    千次阅读 2021-10-28 15:01:21
    这种方法刷新的话vuex中的数据会消失,储存的路由也消失,页面会白屏(没有对应的路由) 2.解决思路 通过路由守卫判断页面刷新后,重新注册路由,再渲染 3.下载插件 npm i vuex-along -S 刷新后恢复vuex中的数据 引入...
  • vue路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面...
  • vue 动态菜单 刷新空白 解决方案

    千次阅读 2020-01-10 01:43:45
    1.先确认自己在route.js 或者 main.js 中有没有使用 路由守卫vue.beforeEach和vue.addRouters() 促使页面每次刷新,重新根据后台返回数据生成动态路由,就像你在登陆时做的事情一样。 代码示范注意点: //注意:...
  • Vue部署上线后,页面空白,无报错
  • vue 动态路由 addRoutes 刷新页面404(空白

    千次阅读 热门讨论 2019-06-03 21:50:11
    vue开发页面,通过addRoutes实现动态路由的添加,但是在进入对应页面的时候刷新时跳转到404或空白,最后发现只需把空白页面跳转直接加载到动态路由后面即可解决,代码如下: 1:静态路由中注释掉{ path: '*', ...
  • vue+ivewui实现动态路由添加,并解决刷新页面空白和页面死循环 困扰了好几天的动态路由问题终于解决了,参考过很多篇文章,在此感谢各位博主的分享。 现将个人新的整理如下,希望能给大家带来更多的帮助。 一.动态...
  • 添加动态路由页面刷新之后空白刷新后打印所有路由状态还在。在注册router的时候就将所有的动态路由添加进来。这是最符合业务需求和业务逻辑的并且高效的方式。这里在代码的基础上说思路,不针对技术选型:一般的...
  • ![图片说明](https://img-ask.csdn.net/upload/201805/06/1525602032_896554.jpg) 为什么会把会在static前面加一个articleDetail的路径
  • vue3 使用addRoute动态添加路由,兼解决刷新空白或跳到404页面问题

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,375
精华内容 950
关键字:

vue动态路由刷新空白