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>