Vue刷新当前路由菜鸟教程_刷新菜鸟教程网

前言开发项目的时候突然接到了这个需求,实验过后,解决方法也蛮多种,下面就讲下常规的几种方案1.改变router-view中的key值通过改变router-view中的key值,来达到刷新组件的目的this.activeDate = new Date()2.给 route

Vue刷新当前路由菜鸟教程

前言

开发项目的时候突然接到了这个需求,实验过后,解决方法也蛮多种,下面就讲下常规的几种方案

Vue刷新当前路由菜鸟教程_刷新菜鸟教程网

1.改变router-view中的key值

通过改变router-view中的key值,来达到刷新组件的目的

<router-view :key="activeDate"></router-view>

this.activeDate = new Date()

2.给 router-view 标签添加 v-if

通过$nextTick(),协助实现。先把 <router-view /> 移除,移除后再重新添加,达到刷新当前页面的功能。

<router-link :to="url" @click.native="refresh">页面1</router-link>
<router-view v-if="flag"/>

<script>
export default {
    data () {
        return {
           flag: true 
        }
    },
    methods: {
      refresh() {
          this.flag= false // 通过v-if移除router-view节点
          this.$nextTick(() => {
              this.flag= true // DOM更新后再通过v-if添加router-view节点
          })
       }
    }
}
</script>

3.新建空白页,也是种不错的方案

refresh.vue //新建页面
<script>
    export default {
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.$router.replace(from.path)
            })
        }
    }
</script>

demo.vue //然后在需要的页面调用
this.$router.replace({
      path: '/refresh',
      query: {
         t: Date.now()
        }
})

4.query传值 watch监听页面$route变化然后更新

5.provide / inject 组合

6.取巧的办法 <router-view ref=”chartView”></router-view>

定义ref,然后调用相对应的方法,最好给每个页面都提供相同的方法

this.$refs.chartView.refresh()

就解决了点击当前路由没有刷新的问题

海计划公众号
(0)
上一篇 2020/03/24 05:43
下一篇 2020/03/24 05:43

您可能感兴趣的内容

  • 如何避免新入职的程序员痛苦和迷茫?菜鸟指南_程序员指南攻略

    1.如何快速的积累和提高新入职场,老板分配的技术方向往往都会跟自己的专业并不相关,因此,新人大都数都会有一个快速学习的过程。比如互联网常见的R&D的方向:Android开发、iOS开发、算法、前端、后端等等,那么,如何才能快速地掌握一门新的技术,并且深入积累和提高呢? 这里以Android的学习和积累为例来介绍我的经验,其实其他方向的也可以依次类推。(1)首

    2020/03/26
  • CSS3的过渡效果,使用transition实现鼠标移入/移出效果指南攻略_效果菜鸟教程下载

    在css中使用伪类虽然实现了样式的改变,但由于没有过渡效果会显得很生硬。以前如果要实现过渡,就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡(transition)功能,就可以从一组样式平滑的切换到另一组样式。(1)背景色过渡变化下面鼠标移入后,按钮背景色会慢慢地变成黄色。鼠标离开,过渡效果又会发生,颜色恢复到初始状态。hangge.com<s

    2020/04/05
  • 7款最好的笔记工具零基础入门_工具入门指南

    编程容易产生挫折,即使作为一种业余爱好也可能是这样。建立一个网页,手机APP或桌面应用都是个很大的工程,好的记笔记技能是让这个工程井然有序的关键,也是克服压力、绝望和倦怠的好方法。但是大多数笔记应用的设计并不是以程序员作为目标受众,这些程序可能会让使用者用起来很难受,甚至完全放弃这些工具。这就是为什么我们为你找来了这些最好的笔记工具。快来看看——你会爱上它们

    2020/03/22
  • javascript如何进行错误处理?教程视频_错误入门基础

    错误处理对于web应用程序开发至关重要,不能提前预测到可能发生的错误,不能提前采取恢复策略,可能导致较差的用户体验。由于任何javascript错误都可能导致网页无法使用,因此作为开发人员,必须要知道何时可能出错,为什么会出错,以及会出什么错。本文将详细介绍javascript中的错误处理机制。Error具有下面一些主要属性:description: 错误描

    2020/03/24
  • React事件绑定几种方法测试零基础入门_react菜鸟教程下载

    前提es6写法的类方法默认没有绑定this,不手动绑定this值为undefined。因此讨论以下几种绑定方式。一、构造函数constructor中用bind绑定class App extends Component {constructor (props) {super(props)this.state = {t: ‘t’}// this.bind1 =

    2020/04/05
  • css媒体查询aspect-ratio宽高比在less中的使用基础指南_less基础指南

    css媒体查询有一个 宽高比很方便,aspect-ratio ,可以直接使用宽/高 来进行页面适配 使用样例如下: // 宽高比在((320/50)+(728/90))/2 两个尺寸中间值以内 适配 320*50 设计图样式
    @media screen and (min-aspect-ratio: ~”249/50″) and (max-aspect-

    2020/03/29
  • 将网址url中的参数转化为JSON格式的两种方法菜鸟教程下载_url小白帮助

    在我们进入主题前,我先先看下获取网址URL的方法:window.location.href // 设置或获取整个URL为字符串 window.location.hash // 设置或获取href属性中在井号#后面的部分参数 window.location.search // 设置或获取href属性中跟在问号?后面,井号#前面的部分参数例如我们这里有一个url

    2020/03/29
  • Vuejs讲解之:响应式、过渡效果、过渡状态菜鸟指南_vue作者: gongyunit零基础入门

    1Vuejs高级之:响应式1.1 如何追踪变化Vue实例使用Object.defineProperty将普通js对象属性转为getter和setter用户可以使用vue-devtools调试每个Vue实例有相应的watch程序实例,可以检测并更新相关的组件图形表示如下:1.2 变化检测问题受JS的限制,属性需要放在data对象上才能让它是相应的动态设置响应属

    2020/04/06
  • CSS3实现0.5px的边框小白攻略_边框入门基础

    单边框0.5px,可以用以下方式:方式一:border + border-image + 线性渐变linear-gradient0.5像素边框
    .border {width: 200px;height: 200px;margin: 0 auto;border-bottom: 1px solid

    2020/03/24
  • micron.js新手入门一款可生成炫酷CSS3动画的js动画库插件

    micron.js入门指南 官方网址:https://webkul.github.io/micron/ GitHub:https://github.com/webkul/micro…

    2020/03/06
  • 做技术,35岁,你慌了吗?菜鸟教程下载_技术小白教程

    35岁,是互联网从业者,尤其是程序员的一道坎。在“996”盛行的互联网行业,受欢迎的永远是28岁左右精力无限的年轻人。你不会永远年轻,但永远有人年轻。当你年纪大了,熬不了夜了,加不了班了,还能吃得了这碗“青春饭”吗?于是很多30岁左右的程序员都在焦虑一个问题:35岁后的出路在哪里?的确,随着年龄的增大,还有最近两年互联网的不景气,越来越多的人开始“方”了。或

    2020/03/23
  • service-mocker入门基础教程_下一代的前端应用 API 接口模拟(mocking)框架

    service-mocker入门基础教程 官方网址:https://service-mocker.js.org GitHub:https://github.com/service-…

    2020/03/06
  • 网站建设如何进行才能吸引更多用户使用攻略_用户使用帮助

    伴随着互联网技术的发展,现如今企业或品牌为了更好的进行宣传都会建设高质量的网站。而在网络建设过程中,要考量用户的喜好,只有做好这方面的工作才能够吸引到更多的用户。下面就跟随小编一起去学习一下网站建设应该做好的事。 一、做好色彩搭配及网站布局为保证用户在浏览网站时有更好的使用感受,一定要注意网站的色彩搭配和布局,应遵循简单大方、色调和谐的基本原则。网站所选择的

    2020/03/23
  • mobi.css使用教程_轻量,灵活的移动端的css框架

    mobi.css使用教程 官方网址:http://getmobicss.com/ GitHub:https://github.com/mobi-css/mobi.css 简介描述:…

    2020/03/06
  • 浏览器工作原理学习笔记小白常识_浏览器新手入门

    单进程问题不稳定,插件崩溃浏览器就崩溃不流畅,脚本执行会让页面卡顿,内存泄漏也会导致浏览器变慢不安全,恶意插件和恶意脚本容易获取系统权限作恶多进程优点进程隔离,插件或者页面崩溃不会导致其他页面崩溃页面隔离,即使 JS 阻塞了渲染进程,影响到的也只是当前的渲染页面,而并不会影响浏览器和其他页面,其他页面的脚本是运行在它们自己的渲染进程中的,浏览器也可以正常使用

    2020/03/20
  • ZeroSSL攻略教程_免费HTTPS证书申请平台

    ZeroSSL攻略教程 官方网址:https://zerossl.com/ 简介描述:免费HTTPS证书申请平台 ZeroSSL是一款免费的网站SSL证书申请网站,用户无需下载或安…

    2020/03/11