精华内容
下载资源
问答
  • <p>vue动态路由刷新页面后丢失,vue动态路由刷新页面后丢失</p>
  • vue动态路由刷新页面参数丢失问题

    千次阅读 2020-10-17 13:41:45
    接下来进入详情页this.$router.push("/detail/111"),此时刷新页面就会发现/111神奇的消失了。一脸懵逼。。。。 查阅相关文档后,发现vue有两种传参方式:params和query,正确的传参姿势应该是这样: params方式: ...

    例如我们在router.js中是这么写的

    {
      path: '/detail/:id',
      component: Detail,
      name:'detail'
    },
    

    接下来进入详情页this.$router.push("/detail/111"),此时刷新页面就会发现/111神奇的消失了。一脸懵逼。。。。

    查阅相关文档后,发现vue有两种传参方式:params和query,正确的传参姿势应该是这样:

    params方式:
    在这里插入图片描述
    query方式:
    在这里插入图片描述
    通过上面对比可以发现,params是和name配合使用,而query是和path配合使用。

    通过对比地址栏路由可以发现,params方式的路径和post方式传参类似,而query和get方式传参类似。

    展开全文
  • 但是刷新页面后,数据就消失了。 解决方案: 1、session&服务器渲染 传统的方案是,登录页和主页是单独的两个页面,登录成功后服务器生成用户信息对应的session,然后渲染主页数据,并通过响应头将sessionid传给...
  • vue动态路由刷新页面空白问题

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

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

     

    我的解决办法:

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

    --------

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

    展开全文
  • 本篇文章主要介绍了vue通过路由实现页面刷新的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了vue 解决addRoutes动态添加路由刷新失效问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了vue实现路由不变的情况下,刷新页面操作,结合实例形式分析了vue路由不变的情况下刷新页面具体原理、操作方法与相关注意事项,需要的朋友可以参考下
  • vue 动态路由 addRoutes 刷新页面404(空白)

    千次阅读 热门讨论 2019-06-03 21:50:11
    vue开发页面,通过addRoutes实现动态路由的添加,但是在进入对应页面的时候刷新时跳转到404或空白,最后发现只需把空白页面跳转直接加载到动态路由后面即可解决,代码如下: 1:静态路由中注释掉{ path: '*', ...
    vue开发页面,通过addRoutes实现动态路由的添加,但是在进入对应页面的时候刷新时跳转到404或空白,最后发现只需把空白页面跳转直接加载到动态路由后面即可解决,代码如下:
       1:静态路由中注释掉{ path: '*', redirect: '/404', hidden: true }(如果有)
       2:在动态路由中push上面注释掉的路由,asyncRoutes.push({ path: '*', redirect: '/404', hidden: true });
       一天的郁闷最后时刻搞定,哈哈哈哈哈哈哈。。。。。。
    
    展开全文
  • 目前在使用VUE3.X开发,发现加载动态路由的话,由于刷新页面就会重新加载VUEX,故会丢失已存在的state,但是又不想localStorage,sessionStorage。 经过多次试验,采取在权限验证里面的路由守卫里,添加 检测如果...
    目前在使用VUE3.X开发,发现加载动态路由的话,由于刷新页面就会重新加载VUEX,故会丢失已存在的state,但是又不想localStorage,sessionStorage。
    经过多次试验,采取在权限验证里面的路由守卫里,添加
    检测如果存在路由则跳转下一步,不存在则再次进入获取用户信息和路由的判断
    
    console.log(store.getters.permission_routes.length);
    if (store.getters.permission_routes.length > 0) {
        //加载路由
        next();
        //router.options.routes = store.state.permission.routes
    } else {
        try {
            // get user info
            // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
            await store.dispatch("user/getInfo");
    
            //加载路由
            const asyncRoutes = await store.dispatch(
                "permission/generateRoutes",
                []
            );

     

    展开全文
  • vue 动态路由刷新404问题

    千次阅读 2020-02-07 21:37:55
    问题出在静态路由下面有个通配符匹配到/404页面 我们把静态路由下的 { path: '*', redirect: '/404', hidden: true } 删除就可以了。 在动态路由校验的代码中有处理跳转404的代码 ...
  • 主要介绍了vue路由传参页面刷新参数丢失问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 因为前端Vue+ElementUI项目是单页应用——即只有一个index.html页面,如果路由从远程获取的话,每次F5或点击刷新按钮刷新页面的时候,就会找不到对应的路径而报404错误  三、解决方案 1、通过api远程获取路由,然后...
  • 下面小编就为大家分享一篇解决vue 路由变化页面数据不刷新的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 这种方法刷新的话vuex中的数据会消失,储存的路由也消失,页面会白屏(没有对应的路由) 2.解决思路 通过路由守卫判断页面刷新后,重新注册路由,再渲染 3.下载插件 npm i vuex-along -S 刷新后恢复vuex中的数据 引入...
  • 下载大佬的权限管理模板运行正常,自己用来改造刷新就无限循环or页面空白,下面是改造成功的permission.js相关代码 // !!!自己项目不需要token const hasGetUserInfo = store.getters.userInfo if ...
  • 页面刷新时候,在router.beforeEach里面去判断,如果是动态路由而且是第一次加载,则动态追加该路由,再进行界面的跳转。 核心代码如下: var dynamicRouter=null//用来获取后台拿到的路由 var getLastUrl=(str,...
  • 在做vue项目时需要使用后端给的路由权限,处理路由动态添加到路由上,几经查找在 vue-Router中有个router.addRoutes 的方法。 官方使用方法及说明 点我 router.addRoutes 函数签名: router.addRoutes(routes: ...
  • 在我不知道vue路由还可以通过addRoutes动态添加时,我只知道vue路由都是写死在路由表中的,每当跳转时再去加载相应的路由。直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道了原来vue-...
  • 路由我们是用公共路由+动态路由,写的过程中发现,在动态路由的页面刷新页面后跳转到了默认页面,也就是我们设置的 { path: '/:pathMatch(.*)', redirect: '/dashboard', hidden: true } 本来这行代码我是写到公共...
  • 使用vue动态路由(“/route/:id” 形式) 传参的时候,修改页面参数,但是视图仍旧是之前的内容,没有进行刷新,示例如下: 原因分析: 具体原因在vue官方文档:响应路由参数的变化一节中有讲过: 当使用路由参数时...
  • 主要介绍了vue在App.vue文件中监听路由变化刷新页面操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • <p style="text-align:center"><img alt=" router.beforeEach方法" height="493" src=...但是刷新页面就空白页,然后又需要清除localStore才可以,麻烦大佬们帮忙看看  </p>
  • 主要介绍了antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • addRoutes 和 vuex 一样,在浏览器刷新后数据会丢失,因为刷新页面 Vue 会重新实例化,路由也会恢复到初始路由。 解决方案: 在页面刷新之后重新获取到通过权限修改后的路由表,然后再次使用 router.addRoutes() ...
  • 因为我在挂载el之后检查的路由,把路由放前面就好了 new Vue({ el: ‘#app’, router, store, template: ‘’, components: { App } }) 把上面的放在 router.beforeEach方法后面
  • vue路由跳转刷新页面

    2021-04-20 15:42:20
    直接刷新整个页面。 首先呢,这次的bug是因为首页的地图显示出来了,可是地图上的数据没显示出来,而地图两边的前端数据又正常显示了。没有报错,根据警告上看是因为地图渲染层的原因。公司的gis不会改,就只有...
  • 主要介绍了Vue路由切换页面不更新问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,557
精华内容 8,222
关键字:

vue动态路由刷新页面

vue 订阅