VUE点击DIV跳转链接
时间: 2023-08-04 08:07:17 浏览: 54
你可以在 Vue 的模板中使用 `router-link` 组件来实现点击 `div` 跳转链接的功能。具体做法如下:
1. 在 Vue 组件中引入 `router-link` 组件:
```javascript
<template>
<div>
<router-link to="/your-link">点击此处跳转链接</router-link>
</div>
</template>
```
2. 在 `to` 属性中指定要跳转的链接地址,例如 `to="/your-link"`。
3. 如果你想要使用 `div` 标签来代替 `router-link` 组件,可以将 `div` 标签的 `onclick` 事件绑定到 `$router.push()` 方法上,例如:
```javascript
<template>
<div onclick="toYourLink()">点击此处跳转链接</div>
</template>
<script>
export default {
methods: {
toYourLink() {
this.$router.push('/your-link')
}
}
}
</script>
```
这样就可以实现点击 `div` 跳转链接的功能了。
相关问题
vue点击按钮跳转外部链接
要在Vue中通过点击按钮跳转到外部链接,你可以使用`<a>`标签的`href`属性,或者使用`window.location`对象的`href`属性。以下是两种不同的方法:
1. 使用`<a>`标签
```html
<template>
<div>
<a href="https://www.example.com" target="_blank">跳转到外部链接</a>
</div>
</template>
```
在上面的代码中,我们使用`<a>`标签的`href`属性指定外部链接的地址,使用`target`属性指定链接在新窗口中打开。
2. 使用`window.location`
```html
<template>
<div>
<button @click="gotoExternalLink">跳转到外部链接</button>
</div>
</template>
<script>
export default {
methods: {
gotoExternalLink() {
window.location.href = 'https://www.example.com';
}
}
}
</script>
```
在上面的代码中,我们通过给按钮添加`@click`事件监听器来触发`gotoExternalLink`方法。在这个方法中,我们使用`window.location.href`属性指定外部链接的地址,从而实现跳转。
vue里点击图标跳转链接
你可以在 `template` 中使用 `a` 标签包含 `i` 标签,然后设置 `href` 属性为目标链接地址。例如:
```html
<template>
<div>
<a href="https://www.example.com">
<i class="fas fa-home"></i> 首页
</a>
</div>
</template>
```
这个例子中,我们使用了 Font Awesome 图标库中的一个图标,点击这个图标会跳转到 `https://www.example.com`。