Home> Web Front-end> Vue.js> body text

How to jump to the page in vue.js

王林
Release: 2021-10-08 13:53:22
Original
5277 people have browsed it

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.

How to jump to the page in vue.js

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".

  
Copy after login

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") } }
Copy after login

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!

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
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!