Vue Js Set Hash Value in Url: In Vue.js, the hash property of the router’s navigation options can be used to set a URL hash fragment. By assigning a value to the location.hash property, we can alter the URL in the address bar of a browser and add information to it without having to reload or redirect. Alternately, we can also use the $router.push() method to set the hash (#) fragment of the URL. This method can be used to add a hash to the existing URL and set a new value for the hash In this tutorial, we will learn how to use native Javascript and Vue.js to add or change the hash (#) value of a URL.

How to Update hash(#) url in Vue Js ?

Updating the hash (#) URL in Vue JS is easy and can be done by using the location. hash property to set a hash value to the existing URL

Vue Js set Hash(#) value in existing Url

<div id="app">
   <h3>Vue Js location.hash Property</h3>
   <p>Set Hash Value in Vue Js</p>
   <button @click="setHashStr">click me</button>
   <p>Hash Value = {{result}}</p>
 </div>
<script type="module">
import { createApp } from "vue";
   createApp({
            data() {
                return {
                    result: ''
                }
            },
            methods: {
                setHashStr() {
                    location.hash = 'basic-table'
                    this.result = location.hash
                }
            }

        }).mount("#app");
</script>

How to Use Vue Router’s Push Method in Vue Js?

 Alternatively In Vue.js, the router.push() method is used to programmatically navigate to a new route without having to reload the page 

Vue Js Route push method to change hash value

this.$router.push({ path: '/', hash: '#bootstrap-table' })

How to replace the hash value in Vue.js?

In Vue.js, the values of a hash can be replaced using the router.replace() function. The router.replace() function can be used to alter the hash fragment of a URL, allowing users to quickly and easily access different pages or components on the same page 

Vue Js Replace Router Hash(#) String

this.$router.replace({ path: '/', hash: '#Bootstrap-table' })