Solve the problem of Vue routing change page data not refreshing

Below I will share with you an article that solves the problem of Vue routing change page data not refreshing. It has a good reference value and I hope it will be helpful to everyone.

Record a little bit every day and record the problems I encountered. I hope it can help more people who encounter the same problems as me.

Problem description: By adjusting the interface, the question list of the help page is dynamically displayed. The question list has multiple levels. When the clicked question does not have the next level question, it will jump to the content page.

The problem is that when I was making a mobile page on my computer, I jumped to the details page one after another. I wanted to go back and clicked the

button to jump directly to the first picture above. It looks like, no, no, no, this is not the result I want. At this moment, I thought of changing the hierarchy of the page by changing the URL.

The parent of the first level is 0, which is not displayed or displayed by default.

The parent of the second level is 1. Clicking on the first level route changes to the following figure:

When you click to enter the next level page, the data will be refreshed, but when you click on the computer to go back, the last URL of parent has changed to 1, and the page still displays the data of 2.

The solution is as follows:

created () {
 console.log(this.getStatus(this.$route.path))
},
 watch: {
 '$route' (to, from) {
  console.log(this.getStatus(this.$route.path))
 }
 },
 methods: {
 getStatus (urlStr) {
  var urlStrArr = urlStr.split('/')
  return urlStrArr[urlStrArr.length - 1]
 }
},

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to introduce the icon icon into the Vue project

##E-mail address format verification in JavaScript

Introduction to time-sharing functions for javascript performance optimization

The above is the detailed content of Solve the problem of Vue routing change page data not refreshing. For more information, please follow other related articles on the PHP Chinese website!