精华内容
下载资源
问答
  • vue 动态路由刷新404问题

    千次阅读 2020-02-07 21:37:55
    问题出在静态路由下面有个通配符匹配到/404页面 我们把静态路由下的 { path: '*', redirect: '/404', hidden: true } 删除就可以了。 在动态路由校验的代码中有处理跳转404的代码 ...

    问题出在静态路由下面有个通配符匹配到/404页面
    我们把静态路由下的

    { path: '*', redirect: '/404', hidden: true }
    

    删除就可以了。
    在动态路由校验的代码中有处理跳转404的代码


    【updated】
    做了动态路由的话把上面的代码放在动态路由结尾处是更好的选择。

    展开全文
  • vue开发页面,通过addRoutes实现动态路由的添加,但是在进入对应页面的时候刷新时跳转到404或空白,最后发现只需把空白页面跳转直接加载到动态路由后面即可解决,代码如下: 1:静态路由中注释掉{ path: '*', ...
    vue开发页面,通过addRoutes实现动态路由的添加,但是在进入对应页面的时候刷新时跳转到404或空白,最后发现只需把空白页面跳转直接加载到动态路由后面即可解决,代码如下:
       1:静态路由中注释掉{ path: '*', redirect: '/404', hidden: true }(如果有)
       2:在动态路由中push上面注释掉的路由,asyncRoutes.push({ path: '*', redirect: '/404', hidden: true });
       一天的郁闷最后时刻搞定,哈哈哈哈哈哈哈。。。。。。
    
    展开全文
  • 动态路由放在导航中间而不是最后 思路 只要在修改原来插入动态路由的地方就可以 操作 修改文件: /src/store/modules/permission.js。 const mutations = { SET_ROUTERS: (state, routes) => { state....

    需求

    把动态路由放在导航中间而不是最后

    思路

    只要在修改原来插入动态路由的地方就可以

    操作

    修改文件: /src/store/modules/permission.js

    const mutations = {
      SET_ROUTERS: (state, routes) => {
        state.addRoutes = routes
        // state.routes = constantRoutes.concat(routes)  //权限路由在最后
        // 把权限路由放在中间,在constantRoutes
        let rou = constantRoutes
        rou.splice(3,0,...routes)
        state.routes = rou
      }
    }
    

    问题

    这会带来一个问题,就是通配路由“*”放在那里?通配路由需要放在整个路由的最后,所以不能放在asyncRouterMap的最后,但是也不能直接放在constantRoutes的最后,因为在动态路由在刷新时会跳转到404,因为刷新是动态路由还没加载进来,但是页面已经进行了跳转,找不到匹配的路由,最后会去到通配路由。

    解决

    需要手动在动态路由加载后,再把通配路由加上去
    修改文件: /src/permission.js

    const res = await store.dispatch('user/getInfo')
    let roles = res.info.auth_list
    const accessRoutes = await store.dispatch('permission/GenerateRoutes', roles)
    let old = JSON.parse(JSON.stringify(router.options))
    router.addRoutes(accessRoutes)
    
    // 在这动态添加最后的通配路由,确保先有动态路由、再有通配路由,解决动态路由刷新会跳转到404问题
    let lastRou = [{ path: '*', redirect: '/404' }]
    router.addRoutes(lastRou)
    
    let newr = JSON.parse(JSON.stringify(router.options))
    next({ ...to, replace: true })
    

    这样动态路由刷新就不会跳转到404啦!

    展开全文
  • 刷新后权限控制的页面就默认跳转到404页面了,搞了半天终于解决了,原因是权限控制的路由模块是动态添加进去的,而我的404监听路由是在默认路由里面的,优先级比动态路由要高,所以刷新后默认先被404接管了,改一下...

    vue-admin-template (vue-element-admin)是个非常好用的B端UI框架,谁用谁知道!

    在使用的过程中,加入权限模块后,刷新后权限控制的页面就默认跳转到404页面了,搞了半天终于解决了,原因是权限控制的路由模块是动态添加进去的,而我的404监听路由是在默认路由里面的,优先级比动态路由要高,所以刷新后默认先被404接管了,改一下,把404监听路由也放到动态路由的末尾就可以了,代码如下:

    // 404 page must be placed at the end !!!
    { path: '*', redirect: '/404', hidden: true }

    把上面这个路由从constantRoutes转移到asyncRoutes中即可!

    展开全文
  • 在做vue项目时需要使用后端给的路由权限,处理路由动态添加到路由上,几经查找在 vue-Router中有个router.addRoutes 的方法。 官方使用方法及说明 点我 router.addRoutes 函数签名: router.addRoutes(routes: ...
  • vue动态路由

    2019-05-20 10:13:02
    addRoutes动态页面刷新进入404页面解决方案。
  • 转于此作者: ...查了很多博文,都没解决,唯独看到此文章,试了一下,就解决了头疼的事。 所 以问题都是next的问题,不知道next({ …to.path, replace: true })这个语法干嘛,问题就出在这句话了,本人后来改成 next...
  • Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案
  • 在页面刷新时候,在router.beforeEach里面去判断,如果是动态路由而且是第一次加载,则动态追加该路由,再进行界面的跳转。 核心代码如下: var dynamicRouter=null//用来获取后台拿到的路由 var getLastUrl=(str,...
  • 我自己使用addRoutes动态添加的路由页面,使用router-link标签可以跳转,但是一刷新就会自动跳转到我定义的通配符 * 指向的404路由页面。这说明没有找到指定路由才跳到404路由的。 我的默认路由是这样子的(这是还没...
  • 并且不支持.htaccess,所以用vue+vue-router+webpack构建出来的单页应用直接将dist文件推送到gh-page分支在切换路由之后手动刷新是会出现404的。只需要两步操作就可以解决 1.给站点根目录添加404.html,一般也就是dist...
  • 这篇文章主要介绍了vue 解决addRoutes动态添加路由刷新失效问题,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 前言 某些场景下我们需要利用addRoutes动态添加路由,但是刷新后就会失效,前段时间...
  • 某些场景下我们需要利用addRoutes动态添加路由,但是刷新后就会失效,前段时间项目里刚好遇到了这个应用场景,所以就花时间研究了一下,做下分享跟记录,说的不对的地方,请大家指正。 应用场景:用户a登录进系统,...
  • 想当然的实现方案用动态路由实现路由权限控制貌似是一个完美的方案,初始路由只有登录和404,登录后动态添加可用路由,同时将菜单数据保存到Vuex或本地用于实现动态菜单,关键节点大致如下:require(['../views/...
  • 前言某些场景下我们需要利用addRoutes动态添加路由,但是刷新后就会失效,前段时间项目里刚好遇到了这个应用场景,所以就花时间研究了一下,做下分享跟记录,说的不对的地方,请大家指正。应用场景:用户a登录进系统...
  • 在路由守护方法router.beforeEach中如果有使用动态路由,注意此时的路由对当前的router无效,下次路由时才起效。 导致的问题是---- 当页面刷新或重新打开页面时,无法找到当前路由(跳转404) 为了解决此问题,将...
  • addRoutes 和 vuex 一样,在浏览器刷新后数据会丢失,因为刷新页面 Vue 会重新实例化,路由也会恢复到初始路由。 解决方案: 在页面刷新之后重新获取到通过权限修改后的路由表,然后再次使用 router.addRoutes() ...
  • 成功登录后,我重定向如下:this.$router.push({ name: 'main' })这工作,但如果我刷新页面或尝试从URL访问它,例如http://testapp.test/main我得到错误:页面不存在404.目前我没有任何保护,以防止访问仅适用于...
  • vue刷新的时候动态添加的router会清空,所以在动态添加的路由页面刷新的时候会因为清空的router而跳转到404.。 在/src/premission.js的最下方router.afterEach修改成下面这样 router.afterEach(to =>{ ...
  • vue-router动态路由加载会遇到一些问题,最严重的问题是刷新动态路由页面导致404,网上查了不少资料,都有点问题,解决了一下,附代码及解决思路。 1、使用动态路由时需要一个全局变量,用来控制什么时候加载这个...
  • 需求是:根据用户登录状态,后台识别状态返回路由...4.刷新页面时会404找不到页面,在main.js中添加存储,这不能直接存储转换过的路由数组,会报错; 路由格式一定要安装原静态路由格式写,不然会报错; ...
  • 参数路由404处理切换路由地址a标签导航router-link 声明式导航会自动加类 要自己写样式常用写法 动态路由v-for 配合动态路由写法不会刷新页面使用router-link 使用名字来导航用处配置使用v-for 配合使用 简介 使用...
  • 动态添加路由,通过后端返回的菜单,为用户动态添加具有权限的路由。这种只会在系统初始化和页面刷新时调用。 一、beforeEach路由拦截 为了方便演示,我把后端返回的菜单路由数组存在sessionStorage中。即代码中的...

空空如也

空空如也

1 2
收藏数 40
精华内容 16
关键字:

vue动态路由刷新404

vue 订阅