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 use the attribute to change the anchor point in the URL and scroll the page to the corresponding position through JavaScript methods. Here is an example:
<template>
<div>
<ul>
<li><a href="#section1" rel="external nofollow" rel="external nofollow" @click="scrollToAnchor">Section 1</a></li>
<li><a href="#section2" rel="external nofollow" rel="external nofollow" @click="scrollToAnchor">Section 2</a></li>
<li><a href="#section3" rel="external nofollow" rel="external nofollow" @click="scrollToAnchor">Section 3</a></li>
</ul>
<div >Section 1</div>
<div >Section 2</div>
<div >Section 3</div>
</div>
</template>
<script>
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' });
},
},
};
</script>
In the example above, we use a list containing anchor links and set the href attribute value of the clicked link 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 the () method to scroll the page to the target position.
2. Use Vue Router to navigate the guard:
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 the component to generate the link, setting the value of the anchor point by passing the to attribute. Then, determine whether an anchor is present in the beforeEach hook of the navigation guard, and use the scrollIntoView() method to scroll the page to the corresponding position.
3. Use ref to achieve anchor point positioning
In Vue 3, ref can be used to implement anchor positioning. ref is a responsive reference object that can be used to reference DOM elements or other data. Anchor positioning can be achieved by using ref in conjunction with scrollIntoView() method. 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 above example, we used ref to create three reference objects section1Ref, section2Ref and section3Ref, corresponding to the DOM elements of the three anchor points. Then, scroll to the corresponding anchor position by calling the scrollToAnchor() method when clicking on the link and passing the corresponding reference object.
In the scrollToAnchor() method, we first determine whether the reference object exists, and then call the scrollIntoView() method to scroll the page to the corresponding anchor position.
By using ref to achieve anchor positioning, it is possible to operate DOM elements more conveniently and achieve flexible anchor positioning effects.
4. Use the a tag to achieve anchor point positioning
Using the <a> tag to achieve anchor positioning is a common and simple method. You can set the ID of the anchor point in the href property of the <a> tag, and then click the link to scroll the page to the corresponding anchor point position. Here is an example:
In the example above, we use the <a> tag to generate the link and set the corresponding anchor ID in the href property. When the user clicks on the link, the browser will automatically scroll to the corresponding anchor position.
<template>
<div>
<ul>
<li><a href="#section1" rel="external nofollow" rel="external nofollow" class="section1">Section 1</a></li>
<li><a href="#section2" rel="external nofollow" rel="external nofollow" class="section2">Section 2</a></li>
<li><a href="#section3" rel="external nofollow" rel="external nofollow" class="section3">Section 3</a></li>
</ul>
<div >Section 1</div>
<div >Section 2</div>
<div >Section 3</div>
</div>
</template>
<script src="/ajax/libs/jquery/3.6.0/"></script>
<script>
const insertLink = val => {
let a = ("a");
let href = val;
("href", href);
("target", "_blank");
("id", "startTelMedicine");
= function () {
//How to close the window = null;
("", "_self", "");
();
};
// Prevent repeated additions if (("startTelMedicine")) {
(("startTelMedicine"));
}
(a);
();
};
$('a').on('click', function () {
//insertLink(("a").getAttribute("href"));
insertLink("#" + );
});
</script>
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 uses the router-link component to generate the link, you should use the to attribute to set the anchor value instead of the href attribute of the <a> tag. 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:
- Use ref to implement anchor positioning:
advantage:
DOM elements can be manipulated more flexibly.
More customizations can be made to scroll behavior in JavaScript.
shortcoming:
Ref reference objects need to be created and managed manually. - Use the <a> tag to 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. (scroll-behavior: smooth)
The value of the anchor point needs to be set in the href or to attribute.
To sum up, using ref to implement anchor positioning provides more flexibility and customization capabilities for scenarios where more complex scrolling behaviors or other operations on DOM elements are required. Using the <a> tag to achieve anchor positioning is simpler and more 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 detailed explanation of various methods of vue3 anchor point positioning. For more related contents of various methods of vue3 anchor point positioning, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!