精华内容
下载资源
问答
  • 本篇文章主要介绍了vue通过路由实现页面刷新的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 下面小编就为大家分享一篇解决vue 路由变化页面数据不刷新的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue路由传参页面刷新参数丢失问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • vue-router 重新路由的时候到当前页面的时候是不进行刷新的。如果使用window.reload() 或者router.go(0) hisory.go(0) 刷新的时候整个浏览器进行刷新加载, 但是页面闪烁, 体验不好。 二、解决办法 使用:...

    一、 背景

    点击按钮跳转到新页面,刷新新页面。 用vue-router 重新路由的时候到当前页面的时候是不进行刷新的。如果使用window.reload() 或者router.go(0) hisory.go(0) 刷新的时候整个浏览器进行刷新加载, 但是页面闪烁, 体验不好。

    二、解决办法

    使用:provide /inject 组合
    作用是: 允许一个祖先组件向其所有子孙后代注入一个依赖, 无论组件层次有多深,并在其上下游关系成立时间里始终生效。

    <template>
      <div id="app">
        <router-view v-if="isRouterAlive"/>
      </div>
    </template>
     
    <script>
    export default{
      name: 'App',
      provide(){
        return{
            reload:this.reload
        }
      },
      data(){
          return {
            isRouterAlive:true,
          }
      },
      methods:{
        reload(){
            this.isRouterAlive = false;
            this.$nextTick(function () {
              this.isRouterAlive = true
            });
        }
      }
    }
    </script>
    

    新增配置:
    在这里插入图片描述
    触发跳转页
    inject 放在 export default中
    在这里插入图片描述
    跳转方法中添加this.reload();
    在这里插入图片描述

    展开全文
  • vue路由跳转刷新页面

    2021-04-20 15:42:20
    路由跳转后地图上的数据不显示。 2 . 直接刷新整个页面。 首先呢,这次的bug是因为首页的地图显示出来了,可是地图上的数据没显示出来,而地图两边的前端数据又正常显示了。没有报错,根据警告上看是因为地图渲染...

    1 . 路由跳转后地图上的数据不显示。
    2 . 直接刷新整个页面。

    首先呢,这次的bug是因为首页的地图显示出来了,可是地图上的数据没显示出来,而地图两边的前端数据又正常显示了。没有报错,根据警告上看是因为地图渲染层的原因。公司的gis不会改,就只有前端强制刷新了。
    直接上代码

    首页路由

              <div class="imgURL1" @click='toView("/ConstructionSupervision")'><p>施工管理</p></div>
    
    
    methods: {
        /**
         * @toView: 跳转路由
         * @param {String} path 路由地址
         * @return:
         */
        toView(path) {
          this.$router.push({
            path: path,
            // name:path
          });
        },
      }
    

    所跳转的路由页面

        <el-button
                          size="small"
                          class="btn-search"
                          @click="toView()"
                      >返回首页
                      </el-button>
    

    这里的判断是重点aboutRoute == ‘/About’,如果不加判断,正常的操作下可以返回首页就直接刷新,正常显示。但是会在所跳转的页面,我这里是表格页,也就是表格页中直接刷新浏览器就回不去了,怎么点击返回首页它都会在表格页原地踏步,哪儿也跳不了

      methods: {
        //路由跳转
        toView() {
          console.log()
          let self = this
          self.$router.push({path: "/About"});
          let aboutRoute = self.$route.fullPath
          if (aboutRoute == '/About') {
            window.location.reload();
          }
        },
      }
    
    展开全文
  • 主要介绍了vue实现路由不变的情况下,刷新页面操作,结合实例形式分析了vue路由不变的情况下刷新页面具体原理、操作方法与相关注意事项,需要的朋友可以参考下
  • vue 路由跳转页面刷新问题解决

    千次阅读 2020-09-10 16:20:48
    看到浏览器中地址在变。页面却一直更新不动。...这样路由页面就会被嵌套在 layuiminiHomeTabIframe元素下。页面也就会实时更新。 那大家有疑问了。在App.vue中不是有个这样的标签吗。用那个不行..

    看到浏览器中地址在变。页面却一直更新不动。尝试很多方法。在App.vue中 <router-view>增加标识key无效的。可以往下面看

     其实解决这个方案的方法却是很简单。不知道的。却入坑很深。

    那就是在被嵌套的元素标签中增加

    <router-view></router-view>

    这样路由的页面就会被嵌套在  layuiminiHomeTabIframe元素下。页面也就会实时更新。

    那大家有疑问了。在App.vue中不是有个这样的标签吗。用那个不行吗。其实App.vue是页面资源的首加载项,是主组件,页面入口文件。也可以这样说。当vue第一次进行渲染的时候。App.vue才会执行,router-view才会发挥其作用。路由进行切换是异步进行的。所以需要重新定义一个router-view。把组件渲染到router-view容器中

    目前还在探究vue框架。加油陌生人

    展开全文
  • 很简单,在跳转路由下面加上一段这个代码就可以 this.$router.push({ path: `/homeMenuBar/About/aboutIndexs`, query: { id: val.id, }, }); setTimeout(function () { window.location.reload(); }, 100...

    很简单,在跳转的路由下面加上一段这个代码就可以

    this.$router.push({
            path: `/homeMenuBar/About/aboutIndexs`,
            query: {
              id: val.id,
            },
          });
          setTimeout(function () {
             window.location.reload();
            }, 100);
    

    写在一个函数体里面即可

    展开全文
  • Vue 路由切换时页面刷新页面

    万次阅读 2019-11-28 19:55:32
    第二次进入页面页面路由参数已经改变,但是页面内容不会刷新。 问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用。后来发现App.vue中使用了<keep-alive>: <template&...
  • 因为有的页面数据放在了同一个vue组建中,又因为开启了路由缓存,需要每次进入该页面的时候强制刷新一下页面,保证数据全部清空了,而且并不是每个页面去了都需要刷新,然后我 方法 methods: { flash(){ this....
  • 下面小编就为大家分享一篇vue页面跳转后返回原页面初始位置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue页面实现当前页面刷新跳转时提示保存,在当前页面刷新跳转时提示保存并可取消刷新,以防止填写的表单内容丢失,感兴趣的小伙伴们可以参考一下
  • vue3项目中,在router.js中写好了路由跳转,但是浏览器显示页面已经跳转,页面却没有刷新而是展示默认页面,需要手动刷新页面才能渲染出跳转页面。 通过路由传参跳转界面,页面没有刷新 解决方法:在 router-...
  • 今天小编就为大家分享一篇解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了Vue路由切换页面不更新问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 携带不同参数跳转至当前路由刷新页面并获取该参数 借助空页面实现 例如:由 /detail?id=1 跳转至 /detail?id=2 detail.vue export default { methods: { test() { this.$router.push({ path: '/empty', query...
  • Vue 解决路由跳转页面刷新的问题 问题: 通过路由传参跳转界面,页面没有刷新 (或者跳转同一个页面页面刷新) (或者 this.$router.replace || this.$router.push 路由跳转刷新) 解决方法: 在 ...
  • vue路由跳转已打开页面刷新数据

    千次阅读 2020-12-09 17:36:59
    vue-router的切换不同于传统的页面的切换。路由之间的切换,其实就是组件之间的切换,不是真正的页面切换。这也会导致一个问题,就是引用相同组件的时候,由于参数不一样不会覆盖原打开的页面而会打开一个重复的页面...
  • 最近用iview-admin做后台管理系统,遇到了个问题,列表页面点击进入详情页面编辑,编辑完成自动跳转到列表页,需要页面重新刷新请求列表(管就是这么简单粗暴),然并卵~,再次回到列表页页面不会重新刷新;...
  • path:'/AAA' 注意一定要带斜杠
  • 点击每个栏目(home, stay, study)进行跳转,方法有多种,可以通过a标签,或者 , 此处我采用 事件进行路由跳转: stay 与stay 共用同一份code文件(study 下的 index.vue),只是数据不同。 --layout -- home.vue --...
  • vue中我们实现从一个页面点击某一项跳转到另外一个页面事使用在点击事件中定义 <card @click.native=“viewMoreRelation(item)” :archive = “item”> viewMoreRelation(row){ var fileLists=[] var map={url...
  • 路由里面设置需要缓存的页面 第二步 使用keep-alive属性包裹需要缓存的页面使用v-if判断,为true的是需要缓存的,false是不需要缓存的 第三步 在需要缓存的页面设置导航钩子,在A野区离开时将值设置为false保证...
  • 当做一个搜索的组件时候,在搜索框由于是同一路由下的,所以会导致不跳转,这个时候有许多方法,在这里我说一种(只懂一个): 添加:key="$route.fullPath
  • 问题描述:当我使用路由跳转页面时,如果页面跳转是同一个路由,传递的参数不同时,页面刷新, 如下图:待收定金和待收首款其实跳转的是同一个组件 ,只是他们传递的参数不同而已。 当我使用路由进行跳转时,我...
  •  遇到个需求,要求在同一个path下,通过不同的query实现跳转不同的页面,大概就是下面这个样子: 这样当全路径变化的时候,就会触发跳转了。 BerySteven_shen 原创文章 79获赞 39访问量 6万+ 关注
  • vue route路由跳转 一进页面刷新

    千次阅读 2019-10-30 11:23:51
    我的需求是日期时间选择器需要实时更新,需要一进...之后路由跳转,一进页面就是刷新,就在需要的页面中加入watch监测即可。 watch:{ $route(to, from) { this.dateTimerange = [new Date().getTime() - 24 * 6...
  • 利用keep-alive 缓存需要缓存的页面
  • 想从添加或者跟新页面跳转回index页面路由跳转回去,怎么使index自动刷新数据呢 在index页面中 加入代码 export default { provide(){ return{ reload:this.reload } }, data() { isRouterAlive:true...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,687
精华内容 5,074
关键字:

vue路由跳转后刷新页面

vue 订阅