After VUE switches pages, there is no response to clicking the button

question

There was a page problem in the online environment yesterday. According to the person concerned, he stayed on this page for a long time because he went to eat, and then came back and found that the button on this page could not be clicked. There was no other problem except that the button could not be clicked. does not exist

The page has been changed to another page because it is not good for external display

Troubleshooting

First of all, the person in charge of that page thinks it is a cache problem, because according to the person concerned, it took a long time to click. When it is reproduced, there is usually no problem with the button, and the click has an effect, because if we do not operate for an hour, we will automatically log out. , so I think it may be that the login person's Redis cache has been deleted, resulting in no permission to click the button

This kind of public click button is controlled by the workflow button, and it is displayed and functioned by the work node where the current login person is located.

But I told him it was not a cache problem, it should be a front-end problem, because if you haven’t moved for a long time, you will automatically be prompted to log in again instead of no button effect

At this time, the tester detected why the button could not be clicked, and she switched the page, for example,I was originally on the project approval page, then switched to the home page, and then switched back, the button cannot be pressed

The person involved also said that indeed, at that time, he wanted to read information on other pages, so he switched to other pages, and then switched back after eating.

Then I probably understand where the problem is. I looked at the hook function on his page and found that he used the created() function, which has methods for destroying monitors and getting buttons, but there is no activated() function.

Solution

I asked him to add the activated() function and try again

activated() {
    
    
    this.busCreate(); //销毁监听
    this.initBtns(); //获取对应按钮
  },

created(): When the vue object is created, it is triggered before the html is rendered; but note,Global vue.js does not force a refresh or is created only once when restarted, that is to say, created() will only be triggered once;
activated(): When the vue object is alive, when entering the page where the activated() function currently exists,Triggered upon entering the page;Can be used to initialize page data, etc.
Simply put, the activated() function is a hook function after the page is activated, which is triggered when entering the page

Because the destroy listener and get buttons are called in created(), all the buttons on the page are effective at the beginning, but because he switched the page and switched the route, and then did not use activated() to call the button method, it caused Switching the routing button has no effect

After my colleague added it,
the problem was solved