vue.js - Should the router drive SPA application state? -

this architectural question keeping state of spa application in sync url. i'm using vue, vue-router, , vuex. here reoccurring problem in application, i'm going describe @ high level.

let's user clicks link takes him /customers /customers/johnsmith. app mutates store. state has been updated because user clicked button, , not because route changed.

in other words.

1. user clicks link
2. state updated because click. (because clicked on component associated object, have direct access customer object)
3. route changed

however, if refresh page on /customers/johnsmith, step 1 no longer applicable, , store in invalid state. additionally, if use browser button go /customers/bobbyhill /customers/johnsmith, app still displays data bobbyhill, though url johnsmith.

does mean, application state should derive url?

1. user clicks link
2. route changed
3. state updated because route changed (based on url, find customer object within store same name)

the above steps handle 3 cases user clicks button go /customers/johnsmith, refreshes, or goes forward/backward in history. no matter how user arrives on page, page should show correct data.

is correct way of handling problem?