The vuex-router-sync
plugin:
import { sync } from 'vuex-router-sync'
export default ({app: {router, store}}) => {
sync(store, router)
}
The nuxt.config.js
plugins: [
// '~plugins/axios',
'~plugins/vuex-router-sync'
],
And then in some of my components:
asyncData({store}){
console.log(store.state.route.params.id);//not the current url params
}
In the above code, like a router /test/:id
, I want to get data in server side, but if the browser location changes like this:
from /
to /test/:id
,in the asyncData
, the route
is still /
, if I try to get store.route.params.id
, it is undefine.
Then if I refresh browser in the path /test/:id
, like: /test/1
, in the asyncData
function, server side will excute, client side will not. And the store.state.route.params.id
is 1, this is OK.
Then if click the browser back, and return. In server side AsyncData not excute, it excutes in client side, but this time store.state.route.params.id
is undefined. However, the context.route is correct, and when the component is mounted, the store.state.route
is right.
There is two questions for me:
1.Why the route from /
to /test/:id
, in server side, the asyncData
does not excute?And when fresh browser in /test/:id
, asyncData
excute in server side?
2.Why when asyncData
excute in client side, store.state.route
is not the some with context.route
?