vue点击图标实现页面跳转

在Vue中实现点击图标后跳转页面通常会用到`<router-link>`组件或者直接使用JavaScript代码绑定点击事件。下面将分别介绍这两种方法。

1. 使用`<router-link>`组件：这是Vue官方推荐的方式，`<router-link>`会渲染成`<a>`标签，并且在构建单页面应用（SPA）时，它会利用前端路由来实现无刷新跳转。示例代码如下：

<router-link to="/some-path">
    <i class="icon icon-some-icon"></i>
</router-link>

在这个例子中，`<router-link>`的`to`属性指定了目标路由地址，点击图标时，Vue router会自动处理路由跳转。

2. 绑定点击事件：如果需要更复杂的逻辑处理，比如在跳转前进行一些判断，可以使用`@click`事件来绑定方法。示例代码如下：

<template>
    <i class="icon icon-some-icon" @click="goToPage"></i>
</template>

<script>
export default {
    methods: {
        goToPage() {
            // 在这里可以添加条件判断等逻辑
            this.$router.push('/some-path');
        }
    }
}
</script>

在这个例子中，点击图标会触发`goToPage`方法，该方法调用了Vue实例的`$router.push`方法来实现页面跳转。