Vue3 A variety of implementation methods for anchor point positioning

In Vue 3, anchor positioning can be achieved in a variety of ways, including using native JavaScript methods and using navigation guards provided by Vue Router. I will introduce these methods below.

1. Use native JavaScript methods:

In Vue 3, you can useProperties to change the anchor point in the URL and scroll the page to the corresponding position through JavaScript methods. Here is an example:

&lt;template&gt;
  &lt;div&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#section1" rel="external nofollow"  rel="external nofollow"  @click="scrollToAnchor"&gt;Section 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#section2" rel="external nofollow"  rel="external nofollow"  @click="scrollToAnchor"&gt;Section 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#section3" rel="external nofollow"  rel="external nofollow"  @click="scrollToAnchor"&gt;Section 3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div &gt;Section 1&lt;/div&gt;
    &lt;div &gt;Section 2&lt;/div&gt;
    &lt;div &gt;Section 3&lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
  methods: {
    scrollToAnchor(event) {
      const href = ('href');
       = href;
      // The scroll position can be customized to the appropriate position      // const targetElement = (href);
      // ({ top: , behavior: 'smooth' });
    },
  },
};
&lt;/script&gt;

In the example above, we use a list containing anchor links and through@clickThe event will click on the linkhrefThe attribute value is set to, thereby changing the anchor point of the URL. If you need to scroll to the corresponding position, you can obtain the target element through the JavaScript method and then call it()Method scrolls the page to the target position.

2. Navigate the Guard using Vue Router:

If you use Vue Router in your Vue 3 project and need to anchor positioning during navigation, you can use the navigation guards provided by Vue Router to achieve this. Here is an example:

<template>
  <div>
    <ul>
      <li><router-link to="#section1">Section 1</router-link></li>
      <li><router-link to="#section2">Section 2</router-link></li>
      <li><router-link to="#section3">Section 3</router-link></li>
    </ul>
    <div >Section 1</div>
    <div >Section 2</div>
    <div >Section 3</div>
  </div>
</template>
<script>
import { useRouter } from 'vue-router';
export default {
  setup() {
    const router = useRouter();
    ((to, from) => {
      if () {
        const element = ();
        if (element) {
          ({ behavior: 'smooth' });
        }
      }
    });
  },
};
</script>

In the example above, we used<router-link>Components to generate links, by passingtoProperties set the value of the anchor point. Then, in the navigation guardbeforeEachDetermine whether there is an anchor in the hook and usescrollIntoView()Method scrolls the page to the corresponding position.

3. Use ref to achieve anchor point positioning

In Vue 3, you can userefto realize anchor point positioning.refIs a responsive reference object that can be used to reference DOM elements or other data. ByrefandscrollIntoView()The method is used in conjunction with the method to achieve anchor point positioning. Here is an example:

<template>
  <div>
    <ul>
      <li><a @click="scrollToAnchor(section1Ref)">Section 1</a></li>
      <li><a @click="scrollToAnchor(section2Ref)">Section 2</a></li>
      <li><a @click="scrollToAnchor(section3Ref)">Section 3</a></li>
    </ul>
    <div ref="section1Ref" >Section 1</div>
    <div ref="section2Ref" >Section 2</div>
    <div ref="section3Ref" >Section 3</div>
  </div>
</template>
<script>
import { ref } from 'vue';
export default {
  setup() {
    const section1Ref = ref(null);
    const section2Ref = ref(null);
    const section3Ref = ref(null);
    const scrollToAnchor = (ref) => {
      if () {
        ({ behavior: 'smooth' });
      }
    };
    return {
      section1Ref,
      section2Ref,
      section3Ref,
      scrollToAnchor,
    };
  },
};
</script>

In the example above, we userefThree reference objects were createdsection1Ref、section2Refandsection3Ref, DOM elements corresponding to three anchor points respectively. Then, call it by clicking on the linkscrollToAnchor()method and pass the corresponding reference object to realize scrolling to the corresponding anchor position.

existscrollToAnchor()In the method, we first determine whether the reference object exists, and then callscrollIntoView()Method scrolls the page to the corresponding anchor position.

By usingrefTo realize anchor point positioning, it can more conveniently operate DOM elements and achieve flexible anchor point positioning effect.

4. Use the a tag to achieve anchor point positioning

use<a>Tags implement anchor positioning is a common and simple method. You can<a>TagshrefSet the ID of the anchor point in the property, and then click the link to scroll the page to the corresponding anchor point position. Here is an example:

<template>
  <div>
    <ul>
      <li><a href="#section1" rel="external nofollow"  rel="external nofollow" >Section 1</a></li>
      <li><a href="#section2" rel="external nofollow"  rel="external nofollow" >Section 2</a></li>
      <li><a href="#section3" rel="external nofollow"  rel="external nofollow" >Section 3</a></li>
    </ul>
    <div >Section 1</div>
    <div >Section 2</div>
    <div >Section 3</div>
  </div>
</template>

In the example above, we use<a>Tags to generate links andhrefThe corresponding anchor ID is set in the property. When the user clicks on the link, the browser will automatically scroll to the corresponding anchor position.

This method is very simple and is suitable for basic anchor positioning needs. But it should be noted that if your Vue 3 project uses Vue Router and usesrouter-linkComponents to generate links, then they should be usedtoProperties to set the anchor value instead of using<a>Tagshrefproperty. This ensures that anchor positioning is also correctly performed when navigating with Vue Router.

No matter which method you choose to implement anchor positioning, you can choose the appropriate method according to the specific needs and scenarios.

Pros and cons of different methods:

1. UserefImplement anchor positioning:

advantage:

DOM elements can be manipulated more flexibly.
More customizations can be made to scroll behavior in JavaScript.

shortcoming:

Need to be created and managed manuallyrefReference object.

2. Use<a>Tags implement anchor positioning:

advantage:

Simple and intuitive, without the need for extra JavaScript code.
The browser will automatically handle scrolling.

shortcoming:

Limited customization of scrolling behavior.
Need to be inhrefortoSets the value of the anchor in the property.

To sum up, userefImplementing anchor positioning provides more flexibility and customization capabilities for scenarios where more complex scrolling behaviors or other operations on DOM elements are required. and use<a>The tag implements anchor positioning more simple and intuitive, and is suitable for basic anchor positioning needs.

Anchor positioning is achieved using native JavaScript methods:

advantage:

Simple and straightforward: Use native JavaScript methods to manipulate DOM elements directly without additional dependencies or libraries.
High flexibility: you can customize scrolling behavior, animation effects, etc., and customize according to your needs.

shortcoming:

JavaScript code needs to be written and managed manually, which may require more work compared to other methods.
Compatibility issues: Different browsers may have differences in the implementation of some scrolling behaviors and need compatibility processing.
Poor maintainability: If there are a large number of anchor points on the page, or if it requires frequent modification and maintenance, it may lead to complex code and difficult to maintain.

To sum up, using native JavaScript methods to implement anchor positioning can provide greater flexibility and customization capabilities, but require more coding efforts and need to pay attention to compatibility and maintainability issues. For simple anchor positioning requirements, using native JavaScript methods can be cumbersome, and other simplified methods can be considered.

Navigate the Guard using Vue Router:

advantage:

Simplify navigation logic: Navigation guards can help you execute corresponding logic before, after route jump, or when route updates, thereby simplifying navigation processing.
Unified management of navigation logic: Through navigation guards, you can centrally manage navigation logic in one place to improve the maintainability and readability of your code.
Permission control can be performed: Navigation guards can be used to perform permission verification, such as intercepting access to certain pages when the user is not logged in.

shortcoming:

It is necessary to learn and understand the concepts and usage of navigation guards, which may require certain learning costs for beginners.
The logic of navigation guards needs to be written and managed manually, which may increase the amount of code and complexity.
Navigation guards can only be verified on the front end and cannot fully guarantee the security of data. The back end still needs to perform corresponding verification and control.

To sum up, using Vue Router navigation guards can simplify navigation logic, unify navigation logic and perform permission control, but they need to learn and understand related concepts, and manually write and manage navigation guards' logic. Depending on the specific requirements and the size of the project, the advantages and disadvantages of using navigation guards can be weighed to decide whether to use them.

This is the end of this article about the anchor positioning of vue3 methods. For more related content on vue3 anchor positioning, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!