How to refresh a page onclicking on one button in specific condition in Vue.js?-CodePudding

I have two options in my Navbar. Shop and MyCart . From shop section i can add products in mycart, so when i am in shop section and click on Mycart from navbar then a minicart slide will toggle from right side, but when i am in mycart page from navbar, then if i click the cart icon then the page should refresh, in my case it's appearing the toggle right side button, which is wrong, i have to refresh the total page when i am in mycart section.

TopNavBar.vue

<template>
  <ul>
    <li>
      <a  href="/shop">Shop</a>
    </li>
    <li  @click="showmyCart">
      <span >MYCart <i ></i></span>
    </li>
  </ul>
</template>

<script>
import MyMiniCart from "./MyMiniCart";

export default {
  name: "TopNavBar",
  data() {
    return {
      
    }
  },
  methods: {
    showmyCart(){
      var pageurl = window.location.pathname;
      if (pageurl == '/pathname') {
        window.location.reload();
      } else {
        //another code snippet
      }
    }
  }
}
</script>

CodePudding user response：

If you really want to hard refresh the page, you can use the following.

window.location.reload()

Meanwhile, I recommend that you use $router.push or keep your state reactive.