精华内容
下载资源
问答
  • 路由刷新
    2022-06-29 09:48:22

    出现刷新白屏的问题原因很好理解,就是由于加载了动态路由,刷新后动态路由消失,所以就出现了白屏问题,解决方式是判断在刷新的时候重新添加动态路由就行了。(参考大神的经验,最终解决了我的问题,感谢...)

    //permission.js
    if (!store.state.menuManage.ifChange) {
            const hebing = true
            await store.dispatch('getTbMenuQueryData', hebing)
            next({ ...to, replace: true })
          } else {
            next()
          }
    //menuManage.js
    getTbMenuQueryData({ commit, state }, hebing) {
        return new Promise((resolve, reject) => {
          let webMenu = JSON.parse(getSession('webMenu'))
          if (webMenu) {
            try {
              if (!state.asyncRoute.length && hebing) {
                commit('SETROUTES', filterAsyncRouter(webMenu))
              }
            } catch (error) {
              console.log(error)
            }
            resolve(webMenu)
          } else {
            ...
          }
        })
      },
    
    
    SETROUTES: (state, d) => {
        ...
        router.matcher = new VueRouter({
          routes: resultAllroute,
        }).matcher
        state.ifChange = true
      },

    更多相关内容
  • 当vue单页面需要替换参数并刷新页面时,这个时候使用this.$router.push或this.$router.replace会发现路由改变了,但是页面上的数据并没有实时刷新。在网上找到了以下几种方法,亲测可用: this.$router.go(0) 在...
  • 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 })我就想知道你是咋成功的,哎,排的有好的但不实用,排到垃圾就不想说了,连使用的组件都没有就光把一段代码粘贴上去,累累累😫

    期望

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

    展开全文
  • 主要介绍了vue 解决addRoutes动态添加路由刷新失效问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 动态添加路由 addRoute添加路由刷新404

    动态添加路由

    大概简而言之,就是需要路由是可以按照项目需求进行配置添加的,而不是一开始就配置好的。
    就好比,一般的静态配置的路由时直接在routes里面进行配置,在这里插入图片描述
    但是动态路由是通过 router.addRoute() 进行配置,

    • 注意:vue3删除了addRoutes(),只能addRoute()一条一条进行加入,写addRoutes()是无效的。

    案例

    此处的登录网页,有三个身份【学生】【老师】【管理员】

    这三个身份权限不同,登录进去后显示的导航/页面也会不同。这个时候就需要判断权限,然后按需求动态的添加路由。

    在这里插入图片描述

    初步

    在导航对应的组件里,先存上三个身份对应的导航信息(一般这个数据是可以从后端拿的,但是我们后端没写这个哈哈哈哈)

    //页面所需要展示的导航
    const navList=reactive([ 
    		//默认的数据是学生导航
              {id:1,imgUrl:"./static/imgs/nav1.png",imgUrlAfter:"./static/imgs/nav1after.png",text:'个人信息',isActive:true,pushUrl:'studentinfo'},
              {id:2,imgUrl:"./static/imgs/nav2.png",imgUrlAfter:"./static/imgs/nav2after.png",text:'课程管理',isActive:false,pushUrl:'schedulingtable'},
              {id:3,imgUrl:"./static/imgs/nav3.png",imgUrlAfter:"./static/imgs/nav3after.png",text:'作业管理',isActive:false,pushUrl:'task'},
              {id:4,imgUrl:"./static/imgs/nav4.png",imgUrlAfter:"./static/imgs/nav4after.png",text:'考勤记录',isActive:false,pushUrl:'attendance'},
              {id:5,imgUrl:"./static/imgs/nav5.png",imgUrlAfter:"./static/imgs/nav5after.png",text:'请假管理',isActive:false,pushUrl:'studentLeave'},
              {id:6,imgUrl:"./static/imgs/nav6.png",imgUrlAfter:"./static/imgs/nav6after.png",text:'成绩管理',isActive:false,pushUrl:'score'},
              {id:7,imgUrl:"./static/imgs/nav7.png",imgUrlAfter:"./static/imgs/nav7after.png",text:'修改密码',isActive:false,pushUrl:'adminModifyPasswordPopup'}
              ])
     //老师导航
       const text2 = reactive(['个人信息','课程表','作业管理','考勤记录','请假管理','综合评分','修改密码'])
     //管理员导航
       const text3 = reactive(['个人信息','课程管理','项目组','考勤管理','请假管理','综合评分','修改密码'])
    
    • 然后在登录的时候,会保存用户登录的信息。
    • 还是在这个组件中,获取登录时保存的信息,判断此用户的身份,然后再根据身份权限进行展示导航的信息。

    由于学生导航是默认的所以不需要判断

     onMounted(()=>{
            // 判断身份,显示不同的nav描述
            // console.log(store.state);
            if (store.state.user.userid==2) {
                userName.value = '老师'
                let x = 0
                navList.forEach(item => {
                   item.text = text2[x]
                   item.pushUrl=pushUrl2[x]
                   x++
                });
            }
             if (store.state.user.userid==3) {
                  userName.value = '管理员'
                let x = 0
                navList.forEach(item => {
                   item.text = text3[x]
                   item.pushUrl=pushUrl3[x]
                   x++
                });
            }
              //   判断当前路由,定位到导航,防止刷新后消失
            navList.forEach(item => {
                item.isActive = false
                if (item.pushUrl===route.fullPath.split('/')[1]) {
                    item.isActive = true
                }
            });
            if (route.fullPath=='/home') {
                navList[0].isActive = true
            }
        })
    

    动态添加路由-使用导航守卫

    在导航守卫中添加,点击登录就会跳转到 /home 路由。

    • 然后在导航守卫进行拦截,判断用户身份,是学生就router.addRoute( ’ 学生路由’ ) 老师管理员皆是同理,只不过得注意,需要遍历 学生路由 进行addRoute ()

    解决刷新404问题

    • 但是如果只addRouter(),那么你在登录进去后,一旦刷新页面,也许页面就会丢失,404。
    • 因为刷新后,路由重新初始化,动态添加的路由此时已不存在,只有一些固定的公共路由(比如登录页面)还在,所以出现了404的情况。
      这是肯定不能的,总不能不让用户刷新吧。
    • 解决办法: 将动态添加的路由存在vuex中,因为页面刷新vuex也会清空。所以就可以理解为,vuex中没有动态路由,就代表页面刷新了,需要重新添加路由。如果vuex中存在,就正常跳转。
      重要部分代码解释:
      在这里插入图片描述

    完整代码:

    import routes from './routers' //公共路由
    import routersAdmin from './routersAdmin'
    import routersStudent from './routersStudent'
    import routersTeacher from './routersTeacher'
    const router = createRouter({
        history: createWebHistory(),
        routes: routes, //引进的routes.js
    })
    router.beforeEach((to, from, next) => {
        // nprogress.start() //进度条
        // 在登录页 清除信息
        if (to.path == '/login') {
            localStorage.clear('USERID')
            localStorage.clear('USERINFO')
            localStorage.clear('TOKEN')
            store.dispatch('getUserId')
            store.dispatch('getLogin')
            next()
        }
        // 判断是否登录
        if (store.state.user.userid == null) {
            // 不是登录的路由 不跳转
            if (to.path != '/login') {
                next({ path: '/login' })
            } else {
                next()
            }
        } else {
            // addRoute的加入路由,刷新就会消失,所以此时需要重新加入路由
            // 判断vuex的addRouters是否为空,若为空 动态路由未加入(刷新后/初始化) 一定要有一个条件,不然会陷入死循环
            if (store.state.user.addRouters.length == 0) {
                // 判断权限
                if (store.state.user.userid == 1) {
                    // 派发action存动态路由
                    store.dispatch('generateRoutes', routersStudent)
                    routersStudent.forEach(route => {
                        router.addRoute(route)
                    });
                    // 首次跳入的页面 nav1
                    if (to.path == '/home') {
                        next('/home/info')
                    } else {
                        // 加入动态路由后,继续进行跳转
                        next({...to, replace: true })
                    }
                } else
                if (store.state.user.userid == 2) {
                    store.dispatch('generateRoutes', routersTeacher)
                    routersTeacher.forEach(route => {
                        router.addRoute(route)
                    });
                    if (to.path == '/home') {
                        next('/home/info')
                    } else {
                        // 加入动态路由后,进行跳转
                        next({...to, replace: true })
                    }
                } else
                if (store.state.user.userid == 3) {
                    store.dispatch('generateRoutes', routersAdmin)
                    routersAdmin.forEach(route => {
                        router.addRoute(route)
                    });
                    if (to.path == '/home') {
                        next('/home/info')
                    } else {
                        // 加入动态路由后,进行跳转
                        next({...to, replace: true })
                    }
                }
            } else {
                // 若addRouters是不为空,则是正常路由跳转(没有进行刷新操作)
                // nprogress.done();
                next()
            }
        }
    
    })
    
    展开全文
  • vue动态路由刷新丢失解决方案

    千次阅读 2021-11-17 18:32:23
    动态路由添加刷新页面出现空白页面或者404页面 因为界面刷新导致动态路由丢失,所以是空页面或者404 我添加动态路由了怎么还剩刷新依旧是空白页面呢? 因为动态路由添加后需要是新导航才会生效 解决方案 需要...

    问题出现的问题

    1. 动态路由添加刷新页面出现空白页面或者404页面

    因为界面刷新导致动态路由丢失,所以是空页面或者404

    1. 我添加动态路由了怎么还剩刷新依旧是空白页面呢?

    因为动态路由添加后需要是新导航才会生效

    解决方案

    需要判断当前页面是否刷新了

    1. 本地存一个当前访问页面的路由下次刷新用来判断当前是否是页面刷新
    2. 使用vuex来存储动态路由数据,如果是空就是刷新页面了

    案例

    1. 使用本地存储 使用路由拦截器跳转之后存数据
    //存访问路由
    router.afterEach((to, from) => {
      localStorage.setItem("new",to.path)
      })
    //处理动态路由
    router.beforeEach((to, from, next) => {
     if(localStorage.getItem('new')){
            var path: any = localStorage.getItem('new')
            if (path == to.path) { //动态路由页面的刷新事件
              // localStorage.removeItem('new')
              store.commit('setBaseRouters')
              router.replace({...to});
            }
          }
    })
    
    1. vuex处理更简单 需要添加路由拦截进行逻辑处理
    router.beforeEach((to, from, next) => {
      store.commit('loginModule/isLogin')
      const isloginPage: boolean = getFilterRouterName((to.name as string));
      let state: any = store.state
      if (isloginPage || state.loginModule.isLogin) {
        if (state.baseRouters.length==0) {
          store.commit('setBaseRouters')
          router.replace({...to});
        }
        next()
      }
      else {
        next({ name: LOGIN })
      }
      if (to.matched.length === 0) {
        // ElMessage.warning("当前路由不存在");
        /**
         * user_type :customer
          user_type :  supplier
         */
          //只有登录了才进入这个逻辑判断
          if(state.loginModule.isLogin){
            if(localStorage.getItem('userinfo')){
                    let data = JSON.parse(localStorage.getItem('userinfo'))
            if (data.user_type == 'customer') {
            //这里处理如果访问项目根路径访问的
              if (to.path == '/admin/') {
                router.replace(import.meta.env.VITE_BASE + "/***");
              }
            } else {
              next({ name: PRODUCT })
            }
            }
        
          }
        
      }
    })
    
    展开全文
  • 目录一、了解动态路由二、解决问题结论 一、了解动态路由 我这里说的动态路由指的是,由后端提供当前角色可以访问的所有路径,前端提前写好路径与组件之间的映射也就是route,然后根据后端返回的url进行匹配,将匹配...
  • 因为前端Vue+ElementUI项目是单页应用——即只有一个index.html页面,如果路由从远程获取的话,每次F5或点击刷新按钮刷新页面的时候,就会找不到对应的路径而报404错误  三、解决方案 1、通过api远程获取路由,然后...
  • vue点击当前路由刷新

    千次阅读 2020-08-27 09:55:06
    这里的当前路由刷新当然不是简单的当前页面的刷新。如果使用 ❌location.reload() ❌this.$router.go(0) 其实最终效果都是刷新了当前浏览器页面,就像你手动F5的效果,这当然不是我们想要的效果,会有闪屏,用户...
  • vue动态路由刷新页面 显示404页面 问题解决
  • <p>vue动态路由刷新页面后丢失,vue动态路由刷新页面后丢失</p>
  • Nginx部署Vue项目动态路由刷新404

    千次阅读 2022-03-03 17:42:35
    记录下Nginx部署Vue项目刷新404的解决方案,遇到了两次,route用的是history路由模式,动态路由: { path: '/article/:blogId', name: 'blog', component: blog } 然后部署nginx, location / { root /usr/...
  • 但是刷新页面后,数据就消失了。 解决方案: 1、session&服务器渲染 传统的方案是,登录页和主页是单独的两个页面,登录成功后服务器生成用户信息对应的session,然后渲染主页数据,并通过响应头将sessionid传给...
  • 解决生产环境history路由刷新404问题

    千次阅读 2022-03-28 20:18:42
    服务器为nodejs+express使用connect-history-api-fallback中间件解决,react和vue都是一样的。... 这样就可以将8000端口转发到80端口了,直接访问xxxx.com相当于xxxx.com:8000,成功解决history路由刷新404.
  • 刚把前端路由生成好,但在切换路由(或tab标签)时,会刷新之前打开过的页面 后面发现是组件里面的name属性值和生成路由的name属性值不一样导致的
  • 默认,当收到导航到当前URL的请求,Angular路由器会忽略,重复点击同一链接页面不会刷新。 在hero.ts添加 constructor(private heroService: HeroService, private router: Router) { this.router....
  • 在使用vue开发是,会遇到要刷新页面的情况,1,里面进行路由刷新,使用router.go(0);2,组件刷新的方法,可以用v-if或是通过改变key值来实现
  • nginx 下添加如下配置
  • 主要介绍了vue在App.vue文件中监听路由变化刷新页面操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue-router动态路由刷新页面报404问题

    千次阅读 2022-06-23 19:39:12
    如果是动态路由,在router下的index.js中定义一个error404路由变量, 然后在动态路由处引入:// 在这里将用户路由添加到动态路由最后之后,404路由就不是最后了,会引起刷新404问题router.addRoutes([...routes, ...
  • 下载大佬的权限管理模板运行正常,自己用来改造刷新就无限循环or页面空白,下面是改造成功的permission.js相关代码 // !!!自己项目不需要token const hasGetUserInfo = store.getters.userInfo if ...
  • vue二级路由刷新页面出现空白

    千次阅读 2021-03-15 08:44:41
    vue二级路由刷新页面出现空白 问题: ​ 在history模式下存在多级路由时,页面路由可以跳转,但是在二级以上的路由时,浏览器刷新页面会出现空白。 解决方法: ​ 在vue.config.js这个文件中找到publicPath: "",...
  • 今天小编就为大家分享一篇vue 刷新之后 嵌套路由不变 重新渲染页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue动态路由刷新页面参数丢失问题

    千次阅读 2020-10-17 13:41:45
    接下来进入详情页this.$router.push("/detail/111"),此时刷新页面就会发现/111神奇的消失了。一脸懵逼。。。。 查阅相关文档后,发现vue有两种传参方式:params和query,正确的传参姿势应该是这样: params方式: ...
  • 情况1:双层路由 /a/b刷新报错, react router 的bug ,浏览器解析会导致资源地址错误 查阅的各种帖子,什么 ngnix 配置;都不好使。解决办法 换成单级路由 /a_b 情况2: ngnix配置过滤时和 路由名字重复,这个改...
  • 初学react,发现在写二级路由的时候有个问题,刷新后样式取不到了 比如:路由 <Route path='/home/index' component={Home} /> 可以发现这里是一个二级路由----也就是说url上面会追加home/index(这里和vue的...
  • Spring cloud gateway 路由刷新无效的问题 因为配置了这个,导致路由刷新失效了
  • vue-admin-template 动态路由刷新 页面空白

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 95,733
精华内容 38,293
关键字:

路由刷新