专栏首页python3vue-router同路由$router.push不跳转一个简单解决方案

vue-router同路由$router.push不跳转一个简单解决方案

一、概述

vue-router跳转一般是这么写:

toCurrentPage: function(thisId){
          this.$router.push({path:'/test ', query: { id: thisId, option: ""}});
 }

但是当遇到,需要跳转同页面不同query的情况,上面的方法不起作用。当然了,从性能来说,理论上这种情况最佳的解决方案,是把需要刷新的包裹成一个init function,跳转的方法,传参再次调用init方法。balabalabala……不在赘述。

但是另一些情况,基本页面所有组件都需要刷新,再次加载对开销影响不大,需要history.back以保证操作逻辑顺畅……我们只要跳转加载如此而已,那么其实也很简单,只需在上述方法基础上加上:

watch: {    '$route' (to, from) {
        this.$router.go(0);
    }
},

监视router变化,刷新页面,效果就正常了!

本文参考链接:

https://blog.csdn.net/wulala_orz/article/details/78928524

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue 嵌套路由使用总结

    如下图,我们希望点击导航栏不同菜单时,导航栏下方加载不同的组件,进而展示不同的页面内容

    授客
  • [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

      在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由、命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 par...

    程序员宇说
  • 浅入深出Vue:路由

    路由的概念在计算机界中的历史大概可以追溯到OSI模型中的数据链路层与网络层中的定义。这里的定义大意是:在转发数据包时,根据数据包的目的地址进行寻址,从而将数据包...

    若羽
  • 【面试需要-Vue全家桶】一文带你看透Vue前端路由

    掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb

    达达前端
  • Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案

    import NotFound from "@/views/Error/404";

    授客
  • Vue Router详细教程

    额,啥玩意? 没听懂。在生活中,我们有没有听说过路由的概念呢? 当然了,路由器嘛。路由器是做什么的? 你有想过吗?路由器提供了两种机制: 路由和转送。路由是决定...

    说故事的五公子
  • Vue路由以及SEO配置

    hash模式对应的路由是类似于这个样子的 http://localhost:8080/#/about

    剑行者
  • 后端管理系统开发(二):路由篇

    很久很久……以前,我们开始了vue-admin-pro之旅。通过 后端管理系统开发(一):登录篇 ,实现登录功能,我们打开了后台管理系统的大门。本节是路由篇的讲...

    冯文议
  • [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)

      在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由。但是在实际使用中,我们经常会遇到...

    程序员宇说

扫码关注云+社区

领取腾讯云代金券