There is a new requirement in the project these days: there is a lot of data in the current page, the filter data conditions are time, page number, type, ID search…. Suppose I have selected a certain type of time in the page, and now I need to grasp the information I am currently seeing to fully display to another friend. Server-side environment: Time and page numbers can be passed dynamically to the back end

I. Initial solution

When looking at this requirement, the first thing that comes to mind is the vUe-Router dynamic parameter pass, so we start coding. Will filter the variable associated with the dynamic legend routeCopy the code
  this.$router.push({query:{date:.. ,page:.. }})Copy the code

When you first enter the page, take out the Query parameter in the route

this.$route.query
Copy the code

The whole idea is that the test found a serious problem, 1. The page refresh problem, when you manually change the Query while browsing, the page does not refresh (vUE routing problem, below). You can react to these changes by observing the $Route object, or by using the component inside the beforeRouteUpdate. 2. The project is a single page, and passing values between components (components of the same class) is a very big problem, I need to write the code in each page (unbearable)

Problem 1 is solved according to the official method:

watch:{
"$route":function(val,oldVal){ ... location.reload() ... }}Copy the code

Route refresh problem solved

Problem 2: Write a public method to solve it for now

In this test, I found that every time I changed the routing parameters, I would refresh the whole page (I just want to request the data again). Think about the solution…..

Ii. Optimization scheme

Process: In order to achieve the effect I want, I will comb through the process of routing changes.

  1. Global variables are required to store values in the Query (Vuex)
  2. Need a switch to control whether to refresh the page (Vuex)
  3. When the page is initialized, the query in the route is delivered to the corresponding variable on the page
  4. Page parameter change is dynamic change route after clear route change start to realize *Vuex is used to store routing queries and to control whether to refresh the page
New vuex.store ({state:{// control page refresh isRefresh:trueQueryParams :{}}, mutations: {, mutations: {testState. QueryParams = {id:"test"}},test2(state) {
      state.isRefresh = "test"}}})Copy the code

When the page is initialized, the query in the route is sent to the page using a public method **

//obj passes the current page's data (this.$data//queryParams passes in the query value of the current page route. Prototype.$initData=function(obj,queryParams){// Use a double loop to this.$dataAttribute assignment in}Copy the code

The page parameter changes are dynamic changes to the route write a public method to assign a value to the route

Three summary

The realization of this function enables me to have a deeper understanding of VUE. The fact that VUE can stand out from many front-end frameworks is largely related to its development concept keeping pace with The Times and the good support of various related ecology in front-end projects. When I first came into contact with VUE, I was deeply attracted by his one-click deployment of front-end projects and easy-to-understand development documents. The more I understand his essence, the more I feel wonderful……. of Vue’s design idea