Vue-router: Watch url query change not working or not present ?

[mutumarieru]

Vue.js & vue-router.js version

"vue-router": "^0.7.13" ( so i guess latest via npm)

Reproduction Link

check the console
http://jsfiddle.net/xyu276sa/1107/

Steps to reproduce

i'm trying to watch when query param changes on a same route, from what i read it activates the "data" hook when you change the query params

What is Expected?

i expect "data" hookd to be executed or an event or somewhat to happen

What is actually happening?

nothing... nothing is happening, the "data" hook doesn't do anything and

[LinusBorg]

Since the same component is used for both cases, the component is re-used ( it is not being destroyed and recreated) by default.

Tio prevent, that, you can set canReuse: false in the component's route options.

http://jsfiddle.net/Linusborg/xyu276sa/1113/

[fnlctrl]

@mutumarieru data should be put under route option.

@LinusBorg @mutumarieru canReuse and data are both deprecated in 2.0, and the recommended way to react to route changes is to add a watcher on $route, and it works with all versions.

[mutumarieru]

@fnlctrl please elaborate ? are your sure when i use .go({query: {test: 1}}) that $route will change ? from what i read on other issues (said by Evan himself), $route is the not changed if the url changes when the component is not reloaded. Can i have an example please

@LinusBorg yes canReuse is depracted and i don't want to reload the whole component, it would be overkill to just change something on a query change

[LinusBorg]

About watching $route

http://jsfiddle.net/Linusborg/xyu276sa/1114/

canReuse is deprecated in 2.0, I know that of course.

But you don't use vue-router 2.0, (which has a totally different API anyways), so I answered in 1.0 terms.

[mutumarieru]

@LinusBorg migration would not be very easy if i start using depracted things though the API is different the migration will be less hard if i don't use so many depracted things, nether less, i don't want to reload a component just for a little change when route changes

[LinusBorg]

Of course. But you also used the data option, which is also deprecrated, so it did not seem that you were preparing for migration, nor did you mention it ;)

[mutumarieru]

yes i'm sorry, for the data, i just used it to point out it wasn't working. i Think an event observer on the route or router instance in the component would be a feature used in many use case, what i did today was added a @click="doSomethingOnRouteChange('route_name') and in this method i did a .go(...) it works well but i think it's not pretty because i prefere using v-link since it looks cleaner, but using this will not trigger any event

[LinusBorg]

I think with beforeach / afterEach hooks on the router and the ability to watch $route in components you have all the tools you might need to react to route changes.

[mutumarieru]

well i think of seperation of concerns here, and puting logic of the component in hooks on the route seems quite weird for me. Except when it's necessary data before component creation

[mutumarieru]

@LinusBorg i didn't see your link with the watcher before, this seems a very good solution.

It doesn't make sense to mutate the query directly, similar to how you shouldn't try to mutate a computed property

this sentence by Evan made me think watching the $route would be useless but it seems to work well.
i need to improve my english i guess ;) thanks