Enforcing the usage of window.location.href in vue-router hash mode is necessary for seamless navigation

Currently, I am working with vue-router 3.0.1, using the mode as hash.

The current URL displays as:

/#/?type=1

I attempted to modify the path while keeping the same base URL but with a different query parameter using window.location.href like so.

window.location.href = '/#/?type=2';

However, despite the change in the browser's URL, there seems to be no other visible effect.

My initial motivation for trying this approach was that when using router.push, it failed to trigger a re-render of the component.

It appears that the original behavior of window.location.href is being altered by vue-router.

In light of this, what steps can I take to successfully navigate to /#/?type=2 in this scenario?

javascriptvue.jsvue-router

Answer №1

Avoid using window.location.href to address the issue at hand. The main problem lies in the reusability of the component, as it does not automatically re-render when only the query parameter is updated. One effective solution is to monitor the $route within your component. Here's a code snippet for reference. Additionally, you can access the jsFiddle example by clicking this link https://jsfiddle.net/Fourzero/cbnom5sL/22/.

Html

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <!-- Utilize router-link or router.push to trigger URL changes -->
  <router-link to="/?type=2">type 2</router-link>
  <router-link to="/?type=1">type 1</router-link>

  <router-view></router-view>
</div>

JavaScript

const Bar = { 
  template: '<div>Type {{type}}</div>',
  data () {
    return { 
      type: ''
    }
  },

  mounted () {
    this.type = this.$route.query.type;
  },

  watch: {
    $route(to, from) {
      // Update the data type with route changes
      this.type = to.query.type;
    }
  } 
}

const router = new VueRouter({
  mode: 'hash',
  routes: [
    { path: '', component: Bar },

  ]
})

new Vue({
    router,
  el: '#app',
  data: {
    msg: 'Hello World'
  }
})

For more in-depth insights, visit the official documentation at https://router.vuejs.org/guide/essentials/dynamic-matching.html.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When the JavaScript compiles, React DOM undergoes updates. However, if you try to refresh the browser, an error will occur stating 'Cannot read properties of undefined (reading '1')'

Utilizing the function below: const useApi = url => { const [data, setData] = useState([]); const [isLoaded, setIsLoaded] = useState(false); const [error, setError] = useState(null); useEffect(() => { const fetchData = () =&g ...

javascriptreactjsjsondomuse-effect

Is it possible to retrieve AJAX data through a callback function?

I have encountered an issue where the ajax success function does not return data as expected. I attempted to use a callback function instead, but I still end up with undefined results. I resorted to using the variable responseText, however, I am looking fo ...

javascriptjqueryajax

A guide on showcasing individual data using database relationships or Eloquent in Laravel within my Vue component

I'm encountering an issue when trying to view a single article with database relationships using Vue.js and Laravel API. Can someone please assist me? Below is my code for fetching a single article: export default { data() { return { ...

laravelvue.jseloquentarticle

Getting access to props within a child component's mounting phase

It is commonly understood that when the child component is mounted before the parent component, trying to access props in the child component's mounted period will result in null. However, I recently came across a scenario where props were successful ...

javascriptvue.jsvue-props

Personalizing text in HTML using JavaScript results

I have a modal dialog box function that pops up when a user clicks a button, triggered by a javascript/jquery script. The text displayed in the dialog is set up within an HTML div element that references the script function. My query is how to personalize ...

phpjavascriptjquery

The console is throwing an error because the store variable in the template is only filled after making an asynchronous API call

Within my component, I am showcasing various properties (exemplifying two below) of the selectedPlan store variable after receiving its value from the store: <div> {{ selectedPlan.periodTitle }} </div> <div> {{ selectedPlan.currency } ...

vue.jsvuex

Show PHP results in an Ajax modal box

Hey everyone! I'm new to this and had some code written for me by a programmer. Unfortunately, I can't reach out to them for help anymore. I have a calculator that shows results (generated by calc.php) without refreshing the page. Check out the ...

javascriptphpjqueryajaxmagnific-popup

Ways to prevent the "Site not secure" warning on an Express server with HTTPS configuration

In the process of creating an Express app, I decided to enable HTTPS for a secure connection. After obtaining a certificate from StartSSL.com and importing it into my server successfully, everything seemed set up correctly. However, an issue has arisen: h ...

javascriptnode.jsexpresssslhttps

Generating JSON Data with the Power of JavaScript and JQuery

Looking to dynamically generate a JSON Object with the specified structure: { "deleteId":[1,2,3], "pointId":[1,2,3], "update":[ { "what":"mission", "id":1, "value":"adsda" }, { ...

javascriptjqueryjsonangularjs

Adjust the width of a div based on a dynamic value in VUE 3

I need assistance with setting the width of my div based on a computed value. Scenario: I have products that retrieve information from an API, and the length value varies depending on the selected product. Therefore, this component needs to be dynamic. T ...

vue.jssassvuejs3bulma

developing a dynamic map with javascript

In the image provided, my concept is for it to initially be without a green tint. However, when the user hovers over specific areas, they would turn green and become clickable links. There are multiple areas in the image, with this being just one example. ...

javascriptjqueryhtml

Restricting zooming to only occur within the img element in a UI

Is there a method to enable image zoom inside specific divs without affecting the overall page zoom? At the moment, I have: <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale ...

javascripthtmlioscssuiwebview

Is the MUI Drawer Open 20% of the Time?

One issue I'm facing is with my MUI drawer - it's supposed to close after a menu item is clicked, but sometimes, about 1 out of 5 times, it remains open. I have based my current code on a helpful post on Stack Overflow. Take a look at the code s ...

javascriptreactjsmaterial-uimaterial-design

Adjusting package.json settings for an npm module

An npm package that I am using has an incorrect file path specified in its package.json. The current configuration is: "main": "./htmldiff.js", However, for it to function correctly, it should be: "main": "./src/html ...

javascriptnpm

"Encountered a reference error in Node.js Express due to an undefined

const _expressPackage = require("express"); const _bodyParserPackage = require("body-parser"); const _sqlPackage = require("mssql"); //Initializing the app with the express web framework ...

javascriptnode.jsexpress

What is causing the child table (toggle-table) to duplicate every time a row in the parent table is clicked?

After creating a table containing GDP data for country states, I've noticed that when a user clicks on a state row, the child table displaying district GDP appears. However, there seems to be an issue with the child table as it keeps repeating. I&apos ...

javascripthtmlvue.js

Tips for defining the type of a parameter in a Vue Component

Is it possible to define a type 'VueComponent' for a component parameter in TypeScript? function callback(component: VueComponent???){ // some code } ...

typescriptvue.js

Improve Email Regular Expression to Restrict Consecutive Periods

I'm not very good with regular expressions, so I decided to seek some help. Here's the regular expression I have: /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.) ...

javascriptregexvalidation

What is the best way to set up a dropdown menu in a data grid where the width matches the fields?

I am looking to optimize the layout for various screen resolutions and ensure compatibility with the latest versions of IE, Firefox, and Chrome. https://i.sstatic.net/3OLh0.jpg ...

javascripthtmlcss

Assign a specific index value from a PHP array to a JavaScript variable

Having a large PHP array with 649 indexes, I am looking to assign a specific index value to a JavaScript variable based on another variable. Is there a way to achieve this without loading the entire PHP array onto the client side for speed and security rea ...

phpjavascriptajaxarraysjson