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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Connection status in standby: Disconnected, reason: NIC Compliance
Feb 19, 2024 pm 03:15 PM
"The connection status in the event log message shows Standby: Disconnected due to NIC compliance. This means that the system is in standby mode and the network interface card (NIC) has been disconnected. Although this is usually a network issue , but can also be caused by software and hardware conflicts. In the following discussion, we will explore how to solve this problem." What is the reason for standby connection disconnection? NIC compliance? If you see the "ConnectivityStatusinStandby:DisConnected,Reason:NICCompliance" message in Windows Event Viewer, this indicates that there may be a problem with your NIC or network interface controller. This situation is usually
How to save pictures without watermark in Xiaohongshu How to save pictures without watermark in Xiaohongshu
Mar 22, 2024 pm 03:40 PM
Xiaohongshu has rich content that everyone can view freely here, so that you can use this software to relieve boredom every day and help yourself. In the process of using this software, you will sometimes see various beautiful things. Many people want to save pictures, but the saved pictures have watermarks, which is very influential. Everyone wants to know how to save pictures without watermarks here. The editor provides you with a method for those in need. Everyone can understand and use it immediately! 1. Click the "..." in the upper right corner of the picture to copy the link 2. Open the WeChat applet 3. Search the sweet potato library in the WeChat applet 4. Enter the sweet potato library and confirm to get the link 5. Get the picture and save it to the mobile phone album
How to handle image compression when saving remote images using PHP?
Jul 15, 2023 pm 03:57 PM
How to handle image compression when saving remote images using PHP? In actual development, we often need to obtain images from the network and save them to the local server. However, some remote images may be too large, which requires us to compress them to reduce storage space and increase loading speed. PHP provides some powerful extensions to handle image compression, the most commonly used of which are the GD library and the Imagick library. The GD library is a popular image processing library that provides many functions for creating, editing and saving images. Here is a use
How to set Momo status
Mar 01, 2024 pm 12:10 PM
Momo, a well-known social platform, provides users with a wealth of functional services for their daily social interactions. On Momo, users can easily share their life status, make friends, chat, etc. Among them, the setting status function allows users to show their current mood and status to others, thereby attracting more people's attention and communication. So how to set your own Momo status? The following will give you a detailed introduction! How to set status on Momo? 1. Open Momo, click More in the lower right corner, find and click Daily Status. 2. Select the status. 3. The setting status will be displayed.
How to download and save Douyin videos
Mar 29, 2024 pm 02:16 PM
1. Open the Douyin app, find the video you want to download and save, and click the [Share] button in the lower right corner. 2. In the pop-up window that appears, slide the function buttons in the second row to the right, find and click [Save Local]. 3. A new pop-up window will appear at this time, and the user can see the download progress of the video and wait for the download to complete. 4. After the download is completed, there will be a prompt of [Saved, please go to the album to view], so that the video just downloaded will be successfully saved to the user's mobile phone album.
How to check server status
Oct 09, 2023 am 10:10 AM
Methods to view server status include command line tools, graphical interface tools, monitoring tools, log files, and remote management tools. Detailed introduction: 1. Use command line tools. On Linux or Unix servers, you can use command line tools to view the status of the server; 2. Use graphical interface tools. For server operating systems with graphical interfaces, you can use the graphics provided by the system. Use interface tools to view server status; 3. Use monitoring tools. You can use special monitoring tools to monitor server status in real time, etc.
How to show up offline on WhatsApp on Android phone
Jul 14, 2023 am 08:21 AM
Want to appear "offline" or don't want to share your current status with your friends on WhatsApp? There is a simple but clever trick to do this. You can adjust your WhatsApp settings so that your current status (offline or last seen) is not visible to your friends or others there. How to show offline status on your WhatsApp status bar? This is a very simple and streamlined process. So, follow the steps below now. Step 1 – Open WhatsApp on your phone. Step 2 – Tap ⋮ and choose to open Settings. Step 3 – Open Privacy settings to access it. Step 4 – On that privacy page, open the “Last Viewed & Online” setting to access it. Step 5 – Change the “Who can
How to save the videos of the video account to the photo album? Method sharing
Mar 26, 2024 am 11:21 AM
Video account is a popular short video application that allows users to shoot, edit and share their own videos. However, sometimes we may want to save these amazing videos to our photo album so that we can always look back at them when needed. So, next I will share some methods to teach you how to save the video of the video account to the album. Videos can be saved through the built-in function of the Video Number application. Open the app and find the video you want to save. Click the options icon in the lower right corner of the video, a menu will pop up, select "Save to Album". This will save the video to your phone's photo album. Method two is to save the video by taking a screenshot. This method is relatively straightforward, but the saved image will contain elements such as video control bars, which is not pure enough. you
