美文网首页
vue 路由强制刷新页面最简单方法

vue 路由强制刷新页面最简单方法

作者: litielongxx | 来源:发表于2020-12-15 17:32 被阅读0次

场景

切换导航用户/组织id后,i需要刷新所在页面。
ctrl+f5/window.reload会页面刷新,但可以vue内部实现。


image.png

1空白页

<template>
    
</template>
<script>
export default {
    data() {
        return {
            
        }
    },
    created() {
              // 获取当前的路由
        let path=this.$route.params.link
//替换为原先路由
        this.$router.replace({
            path:path
        })
    }
}
</script>

2 引入公共head所在跳转页

methods:{
changeOrg(item) {
       //设置本地
       localStorage.setItem('curOrg', item.id)
      //执行store有时没触发
       this.$store.dispatch('update',JSON.parse(JSON.stringify(item)))
      //  跳转其他页面再返回
      this.$router.push({
        name:'back',
        params:{
          link:this.$route.path//当前路由
        }
      })
    },

}

route.js

{
        //全局刷新
        path: '/back',
        name: 'back',
        component: () =>
            import ('@/views/空白页'),
    }

参考资料

https://blog.csdn.net/qq_16772725/article/details/80467492

相关文章

  • vue 路由强制刷新页面最简单方法

    场景 切换导航用户/组织id后,i需要刷新所在页面。ctrl+f5/window.reload会页面刷新,但可以v...

  • vue 强制刷新组件

    vue 强制刷新组件 使用vue进行开发时,如果要刷新当前路由,则调用router.go(0)方法即可。但是某些情...

  • 解决vue路由跳转页面不刷新的问题

    解决vue路由跳转页面不刷新的问题 通过路由传参跳转界面,页面没有刷新解决方法:在 router-view 中加 ...

  • keepAlive使用方法

    vue单页面,多路由,前进刷新,后退不刷新 目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷...

  • vue-router用法

    vue 路由 路由点击跳转不会页面刷新,可以保留数据 安装vue-router:npm install vue-r...

  • Router 原理及 React-Router

    页面路由(浏览器路由) 页面会刷新 hash路由 页面不会刷新,之前做单页应用,使用的传统方法。 h5 路由 h5...

  • VUE 动态移除缓存路由

    VUE 动态移除缓存路由 在缓存路由时,有时候需要将缓存的路由清除掉达到刷新页面数据的效果。方法如下: 配置路由时...

  • Vue 最简单的刷新当前页面

    很多时候我们需要强制刷新页面,你知道的,vue数据驱动视图,数据变化就会导致页面刷新,但是还有一种隐藏的超级简单的...

  • 简书demo

    VUE项目里写锚链接 HTML JS 以上在FireFox有BUG,修复如下: 刷新页面功能最简单的方法

  • 10 Vue路由、http请求、跨域请求fetch/axios/

    1、Vue路由的使用 ->页面之间跳转其不会刷新页面 ->单页面应用 ->用户体验感良好 (1).安装路由模块:n...

网友评论

      本文标题:vue 路由强制刷新页面最简单方法

      本文链接:https://www.haomeiwen.com/subject/eybwgktx.html