精华内容
下载资源
问答
  • 关于VueRouter的局部刷新的问题 最近自己在做一个Vue+ElementUI的后台管理系统Demo,首页如下图,点击左侧菜单的时候,右侧主区域无法局部刷新而是整个页面全局刷新了。

      最近自己在做一个Vue+ElementUI的后台管理系统Demo,首页如下图,点击左侧菜单的时候,地址栏路由改变,但是右侧主区域无法局部刷新,而是整个页面全局刷新了。
    在这里插入图片描述在这里插入图片描述  研究了半天,翻了一些帖子才发现是我的路由配置有问题。
      原来的路由配置:
    在这里插入图片描述
      因为我是在home下面引入的组件AreaMouth,所以这里要在home下面配置children,也就是嵌套路由。
    在这里插入图片描述
      配置完成后问题解决。
    在这里插入图片描述

    展开全文
  • Vue实现页面的局部刷新(router-view页面刷新) 利用Vue里面的provide+inject组合 首先需要修改App.vue。 <template> <!-- 公司管理 --> <div class="companyManage"> <router-view v-...

    Vue实现页面的局部刷新(router-view页面刷新)

    利用Vue里面的provide+inject组合

    1. 首先需要修改App.vue。
    <template>
      <!-- 公司管理 -->
      <div class="companyManage">
        <router-view v-if="isRouterAlive"></router-view>
      </div>
    </template>
    
    <script>
    export default {
      name: "companyManage",
      watch: {},
      provide() {
        return {
          reload:this.reload
        }
      },
      data() {
        return {
          isRouterAlive:true
        };
      },
      methods: {
        reload() {
          this.isRouterAlive = false;
          this.$nextTick( () => {
            this.isRouterAlive = true;
          })
        }
      },
      mounted() {}
    };
    </script>
    
    <style scoped>
    .companyManage {
      width: 100%;
      height: 100%;
      position: relative;
      background: #fff;
    }
    </style>
    
    

    在这里插入图片描述
    2. 到需要刷新的页面进行引用,使用inject导入引用reload,然后直接调用即可。
    在这里插入图片描述

    inject:["reload"],
    this.reload();
    

    在这里插入图片描述

    展开全文
  • vue单页面需要替换参数并刷新页面时,这个时候使用this.$router.push或this.$router.replace会发现路由改变了,但是页面上的数据并没有实时刷新。在网上找到了以下几种方法,亲测可用: this.$router.go(0) 在...
  • Vue局部刷新组件

    2021-01-17 19:58:05
    vue局部刷新组件,可以使用provide/inject方法,在App.vue中添加刷新方法,路由初始状态是显示的 1、在template中添加的内容 <template> <router-view v-if="isRouterAlive"></router-view>...

    内容

    vue中局部刷新组件,可以使用provide/inject方法,在App.vue中添加刷新方法,路由初始状态是显示的

    1、在template中添加的内容

    <template>
        <router-view v-if="isRouterAlive"></router-view>
    </template>

    2、在script中添加的内容

    <script>
    export default {
      provide () {
        return {
          reload: this.reload
        }
      },
      data () {
        return {
          isRouterAlive: true
        }
      },
      methods: {
        reload () {
          this.isRouterAlive = false
          this.$nextTick(function () {
            this.isRouterAlive = true
          })
        }
      }
    }
    </script>

    3、在需要的地方调用

    export default {
      inject: ['reload'],
      data () {
          ...
              
      },
      methods: {
        select(){
            this.reload();
        }
    }
    </script>

    说明:在离开本页面的时候调用刷新方法,然后跳转页面

    展开全文
  • VUE实现页面局部刷新

    千次阅读 2020-10-23 15:56:10
    vue实现页面刷新 在我的页面里有使用过三种页面刷新的方法,接下来挨个介绍下: 一、当前窗口刷新 window.location.reload() //页面刷新 二、路由切换方式 this.$router.push("需要刷新的页面地址"); //页面刷新 ...

    vue实现页面刷新

    在我的页面里有使用过三种页面刷新的方法,接下来挨个介绍下:
    一、当前窗口刷新

    window.location.reload()  //页面刷新
    

    二、路由切换方式

    this.$router.push("需要刷新的页面地址");  //页面刷新
    

    以上两种方式都可以有页面刷新的效果,但是缺点就是会出现空白页,第三种方式就可以解决这一缺点,我们一起来看看。。。

    三、provide / inject 组合方式
    首先在你的App.vue页面添加v-if=“isRouterAlive”,如以下代码:

    HTMl:

    <template>
      <div>
        <router-view v-if="isRouterAlive"></router-view>
      </div>
    </template>
    

    JS:

    export default {
      name: "app",
      data() {
        return {
          isRouterAlive: true,
        };
      },
      provide() {
        //提供
        return {
          reload: this.reload,
        };
      },
      methods: {
        reload() {
          this.isRouterAlive = false;
          this.$nextTick(function () {
            this.isRouterAlive = true;
          });
        },
      },
    };
    

    最后在你需要加载的页面注入App.vue组件提供(provide)的 reload 依赖,然后直接用this.reload来调用就行,如以下代码:

    JS:

      inject: ["reload"], //注入   和methods同级
      methods: {
        onSubmit() {
           this.reload(); //局部刷新
        }
     }
    

    总结:以上三种办法都可以用来页面刷新,希望对大家有所帮助,有任何疑问可以留言,我会随时回复大家的问题的!!!

    展开全文
  • vue局部组件刷新

    千次阅读 2020-08-10 18:00:47
    对此我的解决方法是导入成功之后,局部刷新列表组件,原理控制路由的显示隐藏(v-if),由路由的显示隐藏达到组件重新渲染的效果。 首先:我们在App.vue中,定义一个变量(isRouterAlive)为true,控制路由的显示隐藏,...
  • vuerouter刷新当前所在子路由

    千次阅读 2019-11-12 19:00:46
    vuerouter点击当前页面路由刷新当前页面所在路由,并且不影响其它页面。
  • vue中有两个属性,provide和inject属性 provide:返回一个对象,跟vue中的data很像,里面有我们要传值给子组件的属性或者对应函数。 inject:子组件接收父组件的值,可以是字符串数组或对象。属性值可以是一个对象,...
  • 需求 有A->B->C三个页面,要实现A页面...在B页面上使用组件内的路由守卫。beforeRouteEnter内给变量数组添加B页面组件名,beforeRouteLeave如果不是跳转到C页面,就删除变量数组中B页面的组件。 1.在vuex声明一
  • vue 路由嵌入iframe 刷新保留当前页面

    千次阅读 2020-04-20 14:35:23
    最近在研发过程中,遇到了一个优化,vue项目嵌套在另外一个vue项目的iframe中,外层vue的iframe刷新,iframe中的vue项目希望可以停留在你当前操作的页面,而不是刷回到一开始的iframe里src路径 当开始听到这个优化...
  • 如何利用Vue实现页面的局部刷新

    万次阅读 2018-11-09 14:38:48
    项目里面会分为很多模块,尤其是vue做项目用到嵌套路由的时候,这样很多时候都会用到局部刷新更新数据的需求,找到一篇别人的文章,感觉很好,分享下。 转自:...
  • vue中实现局部刷新

    千次阅读 2019-08-06 16:04:00
    用v-if 就可以来完成页面局部刷新 vue中局部组件刷新,可以使用provide / inject方法,在App.vue中添加刷新方法,路由初始状态是显示的 在需要的组件中引入并在需要的地方调用: 原文连接 :...
  • 主要介绍了通过vue刷新左侧菜单栏操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue项目中实现局部组件刷新

    万次阅读 热门讨论 2019-04-25 16:11:46
    vue局部组件刷新,可以使用provide / inject方法,在App.vue中添加刷新方法,路由初始状态是显示的 <template> <router-view v-if="isRouterAlive"></router-view> </template> &...
  • vue 中如何对局部组件强制刷新

    千次阅读 2020-12-09 16:25:08
    vue 中如何对局部组件强制刷新1.使用this.$forceUpdate强制重新渲染2.使用v-if指令 使用vue进行开发时,如果要刷新当前路由,则调用router.go(0)方法即可。但是某些情况下,我们可能要求仅仅刷新某个组件,而不是...
  • vue/cli3+】路由不变的情况下,刷新页面前言第一种:中转站的方式第二种:provide / inject 的方式 前言 在vue写的后台管理项目中,经常会有增、删、改、查的操作,这些操作只是跟用接口跟后台交互下,既然用接口...
  • 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好 3.解决方法 provide / inject 组合 作用:允许一个祖先组件向...
  • 前言 在vue写的后台管理项目中,...在使用动态路由配置/detail/:id这样的情况下,由于router-view是复用的,单纯的改变id的值并不会刷新router-view所以就要想一个办法,让后台执行完操作后,给前台返一个操作结果,然
  • Vue动态路由 (验证、页面刷新解决方案) // main.js let whiteRoute = ["/login","/register"] let is_flush = true router.beforeEach((to, from, next) => { let whiteroute = whiteRoute.indexOf(to.path); ...
  • watch: { $route() { if (this.$route.params.todaytime) { var newTodaytime = this.$route.params.todaytime;//当前页新id var oldTodaytime = sessionStorage.getItem('oldTodayt...
  • 使用vue进行开发时,如果要刷新当前路由,则调用router.go(0)方法即可。但是某些情况下,我们可能要求仅仅刷新某个组件,而不是路由,那么我们应该怎么做呢? 1.使用this.$forceUpdate()强制重新渲染 如果要在组件...
  • 一、菜单项激活状态保持 有时,我们在项目中会有这样一个需求,即实现 一个侧导航栏,点击不同的菜单项,右边内容会跟着变化,...二、实现页面的路由刷新(局部刷新) 想要实现路由的刷新,官方并没有给出解决办法,...
  • 1.vue2.0为例,在App.vue文件中写 <template> <div id="app"> <!--<img src="./assets/logo.png">--> <router-view v-if="isRouteAlive"/> </div> </template&g...
  • 使用路由前先需要安装vue-router: 命令为:npm install veu-router --save 1.路由创建: 需要提供的配置文件:在项目的src目录下创建router.js文件,也可以直接添加进App.vue。如果选择配置router.js文件,需要...
  • 项目中使用的是element ui,点击菜单栏时,使用编程式导航this.$router.push({name: key}),发现同样的一个路由,多次push时,页面不会再次刷新和发送请求。 在父组件中使用provide抛出: <template> <...
  • 配置子路由的方式=&amp;gt;children方法配置
  • vue路由之replace(无痕浏览)属性

    千次阅读 2020-08-17 22:38:00
    vue路由前言1.SPA是什么2. SPA实现思路和技术点3.路由思路4.通过vue的路由可实现多视图的单页Web应用(基于html的SPA)4.1 引入依赖库4.2 创建自定义组件,例如:Home和Abort组件4.3 定义路由(即路线)4.4 创建路由器...
  • vue 缓存 加 局部刷新 ,起到路由切换时,内容发生改变但是不刷新界面,从而实现网页音乐播放器一直播放同一首歌,而不是随着页面刷新停止播放, 2 解决步骤 vue 实现缓存(keep-alive) 首先是路由设置 // 在...
  • 为了将导航栏显示在每一个页面中,可以将导航栏与放在同一级显示,如下: ... <router></router> ...补充知识:vue+el-menu实现路由刷新和导航栏菜单状态保持(局部刷新页面) 一、菜单项激活状态

空空如也

空空如也

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

vue路由局部刷新

vue 订阅