vue刷新当前路由 router-view中的内容

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

<span class="refresh" title="刷新" @click="refresh">
    <i class="iconfont">?</i>
</span>

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

界面上有个刷新按钮,点击刷新的时候,执行函数,改变activeDate的值,为当前的时间戳。这样就会刷新router-view中的内容。

data() {
    return {
      activeDate: 1
    }
},
methods: {
    refresh() {
      this.activeDate = new Date().getTime()
    }
}

原文地址:https://www.cnblogs.com/2018cd/p/9106327.html

时间: 2024-07-31 17:49:18

vue刷新当前路由 router-view中的内容的相关文章

vue刷新当前路由:router-view 复用组件时不刷新的3种解决方案总结

vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 对于路由,不同的路由跳转,vue会帮我们刷新路由,但是我今天要说的是,同一路由刷新我们的解决方法. 问题背景: 点击用户头像 => 进入用户个人中心,在用户个人中心里点击其他用户的头

vue:在路由跳转中使用拦截器

1:首先在路由对象中的某一个具体的路由对象加这样一个属性 meta: {  requireAuth:true  } 2:然后在main.js中添加这段代码 router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 if (localStorage.getItem('a')) { // 通过vuex state获取当前的token是否存在,通过一个变量(vuex中或localstorage

Android View中滚动相关

方法 scrollTo: (内容的左上角)达到某个地点 scrollBy: 根据当前位置,再移动多少 属性: mScrollX, 以下是文档解释 The offset, in pixels, by which the content of this view is scrolled horizontally. mScrollY, 以下是文档解释 The offset, in pixels, by which the content of this view is scrolled vertica

图解MotionEvent中getRawX、getRawY与getX、getY以及View中的getScrollX、getScrollY

1.getRawX.getRawY与getX.getY的区别 在编写android的自定义控件,或者判断用户手势操作时,往往需要使用MotionEvent中的getRawX().getRawY()与getX().getY()取得触摸点在X轴与Y轴上的距离,这四个方法都返回一个float类型的参数,单位为像素(Pixel).getRawX().getRawY()返回的是触摸点相对于屏幕的位置,而getX().getY()返回的则是触摸点相对于View的位置. 以下两张图直观的表现了这几个方法的区别

vue路由-router

VueRouter基础 vue路由的注册 导入 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> # 可以是下载之后的 <script src="vue.min.js"></script> <script src="vue-router.js"></script> 定义一个匹配规则对

Vue ---在for循环修改页面中某个值,页面没有及时刷新问题(使用this.$forceUpdate()解决)

最近使用vue开发时,在一个函数中使用for循环,改变了页面中的值,在函数中查看是修改成功的,但是页面中没有及时刷新. 解决方法: 运用this.$forceUpdate()强制刷新. export default { data() { return { dataList:[], }; }, methods: { getData() { var _this = this; var dataList = []; dataList = response.data.data; for(var i=0;

Vue的路由Router之导航钩子和元数据及匹配

一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.vue-router.js 打开此链接  https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js 复制粘贴页面的所有内容 四.index.html 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4

vue 2.0 路由创建的详解过程

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <script src="vue221.js"></script> 8 <script src="vue-router231.js&qu

vue_路由Router

使用路由 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌 安装 vue项目创建时选择使用路由,项目将自动在根实例中注册 router 选项, 该 router 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$router 访问到 假设vue项目创建没有选择使用路由,手动将路由注册到根实例中 $ npm install vue-router --save 手动创建目录 src/router/index.js