Vue Router+Vuex implements back state saving

This time I will bring you Vue Router Vuex to implement fallback state saving, and what are the precautions for Vue Router Vuex to implement fallback state preservation. The following is a practical case, let's take a look.

Sorry, the title is a bit long, because this time the running account is indeed a relatively detailed thing, let’s talk about it in detail below:

1Requirements

I recently used electron-vue to develop a cross-platform desktop software. I just started handwriting a few pages and encountered a problem: desktop software usually has navigation requirements

Click the return button to return to the previous page and display the content of the previous page. In fact, not only apps, but also ordinary web pages will have such requirements, especially when using vue to write SPA.

The navigation in the project almost always uses router.push({name: 'xxx', params: {xxx:123...}}) this way. A direct problem caused by this approach is: when the back button is clicked (calling router.go(-1)), only the URL is saved in the history and the params object is lost, which causes page rendering exceptions that rely on params.

2 Solution

In fact, the idea is very simple. Since the params are lost during the back operation, then we will naturally think of: how to save the params! That's right, it's so rude. Since you want to throw it away, I'll keep it for you!

How to save: In fact, you don’t have to think about it. This is a cross-component communication problem, so naturally, using Vuex to save is the most common sense!

When to save: The first reaction is to call router.push({name: 'xxx', params: {xxx:123...}}), then if you navigate back to this URL, if there are no params, try to save it from vuex Pick it up in store. It seems right, but it’s a bit troublesome! ! Don't panic, we have navigation hook router.beforeEach((to, from, next) => { // ... }) Ah!

As its name suggests, the navigation hook provided by vue-router is mainly used to intercept navigation and let it complete the jump or cancel.

At this point, you should fully understand my solution, so I won’t go into too much nonsense. Here’s the code:

/*
Vuex store 定义存储对象RouterParams
*/
//...
const state = {
 //定义一个存储map，key：导航name，value：导航params
 paramMap: {}
}
const mutations = {
 REFRESHPARAM (state, paramKV) {
 //mutation，应该能看懂做的操作吧？
 Vue.set(state.paramMap, paramKV.key, paramKV.value)
 }
}
//...

/*
router中设置一个全局导航钩子
*/
const router = new VueRouter({ ... }) //router
router.beforeEach((to, from, next) => {
 // 只有在找不到params时才"出此下策"
 if (Object.keys(to.params).length === 0) {
 // 从store中取出付给params，此处注意路径未必完全吻合，以你的为准
 Object.assign(to.params, store.state.RouterParams.paramMap[to.name] || {})
 }
 // 存储一下params备用
 store.commit('REFRESHPARAM', {key: to.name, value: to.params})
 next() // 千万不要忘了，否则导航会被“掐死”在这儿。:-D
})
//...

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Other related articles on the Chinese website!

Recommended reading:

JS operation browser opening and closing

How to encapsulate Canvas into a plug-in with js

js uses regular expressions for password strength verification

The above is the detailed content of Vue Router+Vuex implements back state saving. For more information, please follow other related articles on the PHP Chinese website!