Static GitHub Issues

[1642] Update the url causes reinitialization of the current component

prev: How to get a vuex instance in the axios of plugins, I want to implement an interceptor to add public parameters but not to store,
next: Localstorage / persisting vuex

I'm trying to create a very simple application. That is: the page with the search box at the top and search results below nothing, just a box. When a user types something in the box, the url should be automatically updated. For example, if a user types something, the url should become /search?srch=something. When a user reloads the /search?srch=something, the page should appear with something already typed in the input field.

Here's the example, https://github.com/Kasheftin/nuxt-search-bug, and the relevant page from there: https://github.com/Kasheftin/nuxt-search-bug/blob/master/pages/search.vue

So I watch for the changes of the input field and call this.$router.replace({name: 'search', query: {srch: srch}}. Actually, I don't want any logic to run, I want just update the url. But the logic runs, I can't disable it (I tried to change the this.$router.listener.ready, replace the listener with some dummy function etc). It destroys the current search component, creates a new one, the input loses the focus. This all works buggy and looks buggy as well.

I'm not sure if it's the nuxt's bug or the vue-router's itself. The last is strange, it misses obvious parameters like any other library has, for example one using backbone router could easily pass additional {trigger: true/false} parameter to the navigate function, but the vue-router does not have any. It has a lot of guards, but they are useless if you want to change the url, but don't want to trigger any logic behind.

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1468">#c1468</a>)</em></sub></div>