Web Front-end
JS Tutorial
Detailed explanation of the solution to the problem of vue-router routing parameter refresh and disappearance
Detailed explanation of the solution to the problem of vue-router routing parameter refresh and disappearance
This article mainly introduces the solution to the problem of vue-routerrouting parametersrefreshing and disappearing. It has a certain reference value. Interested friends can refer to the
scenario: In the single-page application implemented by vue-router, after the login page calls Login interface, the server returns the user information and then passes it to the homepage through router.push({name: 'index', params: res.data}) component and display data on the homepage. But after refreshing the page, the data disappeared.
Solution:
1, session&Server rendering
The traditional solution is that the login page and the homepage are two separate pages. After successful login, the server generates a session corresponding to the user information, then renders the homepage data, and passes the sessionid to the browser through the response header and generates the corresponding cookie file. In this way, the next time the page is requested, the browser will bring the corresponding cookie in the http header, and then the server will determine whether the user is logged in based on the sessionid in the cookie, and then display the user data.
If the project adopts the idea of front-end and back-end separation, and the server only provides interfaces and does not perform server rendering, then this method will not work.
2. $route.query
We can bring the login request parameters when routing:
router.push({name:'index', query:{username: 'xxx', password: 'xxxxxx'}})
...
this.$ajax({
url: 'xxx',
method: 'post',
data: {
username: this.$route.query.username,
password: this.$route.query.password
}
})The login parameters will be saved in the URL, like this: "http://xxx.xxx.xxx/index?username=xxx&password=xxxxxx", and then the login interface is called in the created hook to return the data.
Even if the password is md5 encrypted, it is definitely unreasonable to put sensitive information such as username and password in the URL.
3. Cookie
Another way is to store the login parameters in the cookie, and then obtain the information stored in the cookie in the created hook. Then call the login interface. It is also unreasonable to store the user name and password in a cookie. The improved version is that the server returns a token after successful login, and the user data is obtained through the token within the validity period.
Cookie data access is more troublesome, because the key-value pairs in the cookie are strings and are linked by "=", and additional methods for operating cookies need to be written.
<script>
function setCookie (name, value, exdays) {
let date = new Date()
date.setTime(date.getTime() + (exdays * 24 * 60 * 60 * 1000))
let expires = "expires=" + date.toGMTString()
document.cookie = name + "=" + value + "; " + expires
}
function getCookie (name) {
name = name + "="
let cookieArr = document.cookie.split(';')
for (let i = 0; i < cookieArr.length; i++) {
let cookie = cookieArr[i].trim()
if (cookie.indexOf(name) === 0) {
return cookie.slice(name.length)
}
}
return ""
}4. HTML5 Web Storage
When it comes to Web storage, I must subconsciously think that many browsers do not support it. In fact, IE8 and above do Support localStorage and sessionStorage. The Vue project supports at least IE9, so you can use web storage with confidence.
There is no time limit for localStorage to store data, and it will not become invalid unless it is actively deleted. SessionStorage will become invalid when the page or browser is closed, which is suitable for this scenario.
We can store the token information in sessionStorage, and then request data through the token every time the page is refreshed; but since the token can be stored locally, why not just save commonly used data directly to the local? Utilizing local data can reduce client network requests and reduce server load.
Since localStorage and sessionStorage are read-only, they cannot be directly pointed to an object. You cannot use Object.assign() to copy the object, because the value will become the string "[object Object]", so you can only add attributes to sessionStorage through looping.
...
for (var key in res.data.customer) {
sessionStorage[key] = res.data.customer[key]
}
...The above are the problems I encountered in my recent work. The final solution was to use sessionStorage to store data.
The above is the detailed content of Detailed explanation of the solution to the problem of vue-router routing parameter refresh and disappearance. 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
6 Ways to Refresh Web Pages on iPhone
Feb 05, 2024 pm 02:00 PM
When you browse the web on your iPhone, the loaded content is temporarily stored as long as the browser app remains open. However, the website updates content regularly, so refreshing the page is an effective way to clear out old data and see the latest published content. This way, you always have the latest information and experiences. If you want to refresh the page on iPhone, the following post will explain you all the methods. How to Refresh Web Pages on Safari [4 Methods] There are several methods to refresh the pages you are viewing on the Safari App on iPhone. Method 1: Use the Refresh Button The easiest way to refresh a page you have open on Safari is to use the Refresh option on your browser's tab bar. If Safa
F5 refresh key not working in Windows 11
Mar 14, 2024 pm 01:01 PM
Is the F5 key not working properly on your Windows 11/10 PC? The F5 key is typically used to refresh the desktop or explorer or reload a web page. However, some of our readers have reported that the F5 key is refreshing their computers and not working properly. How to enable F5 refresh in Windows 11? To refresh your Windows PC, just press the F5 key. On some laptops or desktops, you may need to press the Fn+F5 key combination to complete the refresh operation. Why doesn't F5 refresh work? If pressing the F5 key fails to refresh your computer or you are experiencing issues on Windows 11/10, it may be due to the function keys being locked. Other potential causes include the keyboard or F5 key
How to solve the problem of all desktop icons disappearing in Windows 10
Dec 25, 2023 pm 04:55 PM
I don’t know if you have ever woken up in the morning and turned on the computer and found that all the desktop icons on the computer are gone. Don’t panic at this time. It may be that your shortcut keys have deleted the desktop icons. This can be restored directly in the Recycle Bin. If not, you can also check the method of displaying the icon to recover. Let’s take a look at the specific steps below. Recovery method for all disappeared Win10 desktop icons 1. If there is only one Recycle Bin left on the desktop, then it is possible that you have deleted all the shortcut keys for changing faces. At this time, you can click on the Recycle Bin to see if you can find a shortcut to delete it. 2. If you see the shortcuts you deleted, select all the shortcuts, right-click the mouse and select Restore. 3. You can also right-click the mouse and click Undelete. so all
I encountered the vue-router error 'NavigationDuplicated: Avoided redundant navigation to current location' in my Vue application - how to solve it?
Jun 24, 2023 pm 02:20 PM
The vue-router error "NavigationDuplicated:Avoidedredundantnavigationtocurrentlocation" encountered in the Vue application – how to solve it? Vue.js is becoming more and more popular in front-end application development as a fast and flexible JavaScript framework. VueRouter is a code library of Vue.js used for routing management. However, sometimes
Win7 wireless network adapter is missing
Dec 23, 2023 pm 05:57 PM
Many users have reported that the win7 wireless network adapter has disappeared. In this case, it is likely that there is a problem with the network card or network card driver. We only need to repair the network card driver or replace a good network card to solve the problem. The wireless network adapter disappeared in win7 1. First, right-click the Start button and select "Device Manager" 2. Then we find the "Network Adapter", right-click and choose to update the driver first, or disable the device first and then enable it. You can also click here "Properties" 3. After clicking Properties, click "Driver" above, click "Update Driver" here 4. Click here and select "Automatically search and update driver files" 5. After completion, you can also change the computer's network Reset it. First, press win
How to quickly refresh a web page?
Feb 18, 2024 pm 01:14 PM
Page refresh is very common in our daily network use. When we visit a web page, we sometimes encounter some problems, such as the web page not loading or displaying abnormally, etc. At this time, we usually choose to refresh the page to solve the problem, so how to refresh the page quickly? Let’s discuss the shortcut keys for page refresh. The page refresh shortcut key is a method to quickly refresh the current web page through keyboard operations. In different operating systems and browsers, the shortcut keys for page refresh may be different. Below we use the common W
An article that explains Vue routing in detail: vue-router
Sep 01, 2022 pm 07:43 PM
This article will give you a detailed explanation of the Vue-Router in the Vue family bucket, and learn about the relevant knowledge of routing. I hope it will be helpful to you!
Vue and Vue-Router: How to share data between components?
Dec 17, 2023 am 09:17 AM
Vue and Vue-Router: How to share data between components? Introduction: Vue is a popular JavaScript framework for building user interfaces. Vue-Router is Vue's official routing manager, used to implement single-page applications. In Vue applications, components are the basic units for building user interfaces. In many cases we need to share data between different components. This article will introduce some methods to help you achieve data sharing in Vue and Vue-Router, and
