vue常用跳转方式大全,vue站内跳转和打开新页面跳转到百度
在Vue中,可以使用vue-router
来实现站内跳转。以下是一些常见的跳转方式:
- 使用
router-link
组件实现点击跳转:
<router-link to="/about">About</router-link>
- 在JavaScript中使用
this.$router.push
实现跳转:
this.$router.push('/about');
- 使用
window.location.href
直接跳转到外部链接:
window.location.href = 'https://www.baidu.com';
- 使用
router-link
的target="_blank"
属性在新窗口打开链接:
<router-link to="/about" target="_blank">About</router-link>
- 在JavaScript中使用
window.open
打开新窗口:
window.open('https://www.baidu.com', '_blank');
示例代码:
<template>
<div>
<!-- 站内跳转 -->
<button @click="gotoAbout">Go to About Page</button>
<!-- 在新窗口打开百度 -->
<button @click="gotoBaidu">Open Baidu.com</button>
</div>
</template>
<script>
export default {
methods: {
gotoAbout() {
this.$router.push('/about');
},
gotoBaidu() {
window.open('https://www.baidu.com', '_blank');
}
}
}
</script>
以上代码展示了如何在Vue应用中实现站内跳转和在新窗口中打开外部链接。
评论已关闭