How to jump to the page in vue.js

How to jump pages in vue.js: 1. Set three buttons for back, forward, and jump to any page in the DOM; 2. Manipulate back, forward, and jump to any page in the constructor There are three buttons on one page, just write the methods in methods.

The operating environment of this article: windows10 system, vue.js 2.5.2, thinkpad t480 computer.

Under normal circumstances, we will choose to use the tag when making page jumps in vue, but we cannot directly manipulate DOM elements in the constructor, so in this case we should How to jump to the page?

Let’s take a look at the implementation!

Step 1:

We first set three buttons in the DOM, namely "Back", "Forward", and "Jump to any page".

<button @click="goback">后退</button>
<button @click="forwards">前进</button>
<button @click="goto">跳转任一页</button>

The next step is to manipulate them in the constructor

When the "Back" button is selected, the page will jump to the previous page

When the "Forward" button is selected, The page will jump to the next page

When the "Jump to any page" button is selected, the page will jump to any page

Except for the last jump to any page In addition, the other two buttons need to have historical traces before they can jump. The

method must of course be written in methods:

methods: {
     goback() {
       this.$router.go(-1)
     },
     forwards() {
       this.$router.go(1)
     },
     goto() {
       this.$router.push("/about")
     }
}

Recommended learning: php training

The above is the detailed content of How to jump to the page in vue.js. For more information, please follow other related articles on the PHP Chinese website!