How to jump to the div of vue

There are two ways to jump div elements in Vue: use Vue Router and add router-link component. Add the @click event listener and call this.$router.push() method to jump.

How to jump div in Vue

Method 1: Use Vue Router

Vue Router is an officially recommended routing library for Vue.js, used to manage routing in single-page applications. By using router-link component, you can add a jump link to the div element:

 <code class="html"><template> <div> <router-link to="/about">关于我们</router-link> </div> </template> <script> import { router } from &#39;@/router&#39; </script></code>

Method 2: Use @click event listener

You can add an @click event listener to the div element and use this.$router.push() method to jump to the specified URL when triggered:

 <code class="html"><template> <div>关于我们</div> </template> <script> import { router } from &#39;@/router&#39; export default { methods: { goToAbout() { this.$router.push(&#39;/about&#39;) } } } </script></code>

How to choose a method

• If your application requires complex routing management and dynamic routing generation, it is recommended to use Vue Router.
• For simple static jumps, the @click event listener is simpler and easier to use.

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