Home > Web Front-end > Vue.js > How to solve the problem that vuejs route push does not jump

How to solve the problem that vuejs route push does not jump

藏色散人
Release: 2021-11-01 11:34:54
Original
6179 people have browsed it

The solution to vuejs route push not jumping: 1. Open vue-router to jump to part of the code; 2. Add "watch: {'$route' (to, from) {...}, "Method; 3. Monitor router changes and refresh the page.

How to solve the problem that vuejs route push does not jump

The operating environment of this article: windows7 system, vue2.9.6 version, DELL G3 computer.

How to solve the problem that vuejs route push does not jump?

vue-router has the same route as $router.push and does not jump. A simple solution

vue-router jumps It is usually written like this:

toCurrentPage: function(thisId){
          this.$router.push({path:'/test ', query: { id: thisId, option: ""}});
 }
Copy after login

But when it comes to situations where you need to jump to different queries on the same page, the above method does not work. Of course, in terms of performance, the theoretically best solution to this situation is to wrap what needs to be refreshed into an init function, jump to the method, pass the parameters and call the init method again. balabalabala...I won’t go into details.

But in other cases, all components of the basic page need to be refreshed. Loading again has little impact on the overhead. History.back is needed to ensure smooth operation logic... We only need to jump to load, so it is actually very Simple, just add on the above method:

watch: {
    '$route' (to, from) {
        this.$router.go(0);
    }
},
Copy after login

Monitor router changes and refresh the page~

Recommended: "The latest 5 vue.js video tutorial selections

The above is the detailed content of How to solve the problem that vuejs route push does not jump. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template