How to solve the problem of data loss when router passes params parameters during page refresh by Vue
In this article Xiaobian introduces in detail "Vue how to solve the problem of data loss when router passes params parameters in the page refresh", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "Vue how to solve the problem of data loss when router passes params parameters in the page refresh" can help you solve your doubts, following the editor's train of thought slowly in depth, together to learn new knowledge.
Vue project: how to solve the problem that router passes params parameters and data is lost when the page is refreshed
For example, our A page has a button, click the button to pass the data to other pages:
Then we can create a new A.vue file with the following code:
ToB
Export default {
Name:'A'
Data () {
Row: {
Name: 'page A'
}
}
Methods: {
ToB () {
This.$router.push ({
Name:'B'
Params: {
Row: this.row
}
})
}
}
}
Then page B accepts the data from page A:
We can create a new B.vue page:
{{row.name}}
Export default {
Name:'B'
Props: ['row']
}
The reason why we can use the props attribute to receive row is that we enable decoupling of routing parameters by setting props to true in the routing profile:
{
Path:'/ B'
Name:'B'
Props: true
Component: import ('B.vue')
}
But if the user suddenly refreshes the B page data will be lost, how do we generally solve it? There are probably three ways:
The first is to use query query to pass parameters: pass data on page A:
This.$router.push ({
Name:'B'
Query: {
Row: JSON.stringify (this.row)
}
})
B page accepts data:
{{JSON.parse ($route.query.row) .name}}
Second: still use params to pass parameters, but must be combined with localstroage cache
For example, page A:
This.$router.push ({
Name:'B'
Params: {
Row: this.row
}
})
B page accepts data: caches the data during the created life cycle and deletes the cache when the page is destroyed
Export default {
Name:'B'
Data () {
Return {
Row: null
}
}
Created () {
Let rowData = localStorage.getItem ('rowData')
If (rowData) {
This.row = this.$route.params.row
LocalStorage.setItem ('rowData', JSON.stringify (this.$route.params.row))
}
}
BeforeDestory () {
LocalStorage.removeItem ('rowData')
}
}
Read this, the "Vue how to solve the router transmission params parameters in the page refresh data loss" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more about the article, welcome to pay attention to the industry information channel.
