In the Vue project, if it is an internal jump in the page, it can be realized with this.$router.repalce(). If we use the same method to jump to the external link, we will add http://localhost in front of the external link: 8080/#/causes a problem with the jump, so how do we jump to the external link? The jump link is divided into the original window and the new window to open the external link. The specific explanation is as follows:
HTML part:
<div class="fotterRightTextOne" @click="jump">Vue jump external links</div>
The following is the Js part
1. First, explain how to open external links in the original window. If we want to return to the original page after the jump, we can use this method. Next, we use two methods to achieve it:
(1) Use location.href = "" to realize the original window jump
jump() {
location.href="https://www.baidu.com/"
}
(2) Use window.open(url,'_self'), the _self attribute indicates that the target webpage is displayed in the current window
jump() {
window.open('https://www.baidu.com/', '_self')
}
2. If we want to open an external link in a new window, we can use window.open(url,'_blank'), and the _blank attribute means to display the target webpage in a new window
jump() {
window.open('https://www.baidu.com/', '_blank')
}
Summarize
window.openIn essence, it can be regarded as the version <a>of the label js, or to open the window coded, but it is <a>more flexible than the label, and can jsrealize the communication with the opened page.