svg 点击事件_关于vue-router控制底部导航栏点击切换icon的实例

首先先上一下界面：底部导航栏使用vue-router做的

需求就是：让导航栏的Icon点击之后切换为一个新的Icon,下面是代码板块

<template>
    <div class="router-link-container">
            <router-link to="/labels" active-class="selected" v-on:click.native="change">
                <svg class="icon" aria-hidden="true" :class="{iconSelected:!isActive}">
                    <use xlink:href="#icon-selected-label"></use>
                </svg>
                <svg class="icon" aria-hidden="true" :class="{iconSelected:isActive}">
                    <use xlink:href="#icon-label"></use>
                </svg>
                <span>标签</span>
            </router-link>

        <router-link to="/money" active-class="selected">
            <div class="tuber">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-jiahao"></use>
                </svg>
            </div>
            <span class="tuber-name">记账</span>
        </router-link>

        <router-link to="/statistic" active-class="selected">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-selected-statistic"></use>
            </svg>
            <span>数据</span>
        </router-link>
    </div>
</template>

<script lang="js">
    export default {
        name: "Nav",
        data() {
            return {
                isActive: false
            }
        },
        methods: {
            change: function () {
                this.isActive = !this.isActive;
                console.log(this.isActive);

            }
        }
    }

</script>

<style scoped lang="scss">
    .iconSelected {
        display: none;
    }
</style>

大家重点看这一块：

<router-link to="/labels" v-on:click.native="change">
    <svg class="icon" aria-hidden="true" :class="{iconSelected:!isActive}">
        <use xlink:href="#icon-selected-label"></use>
    </svg>
    <svg class="icon" aria-hidden="true" :class="{iconSelected:isActive}">
        <use xlink:href="#icon-label"></use>
    </svg>
    <span>标签</span>
</router-link>

<script lang="js">
    export default {
        name: "Nav",
        data() {
            return {
                isActive: false
            }
        },
        methods: {
            change: function () {
                this.isActive = !this.isActive;           
            }
        }
    }

</script>

1. 结构：router-link 里面包有两个 svg ，svg为iconfont的symbol引用
2. 在router-link上面挂上v-on监听 函数change
3. 在两个svg上挂上v-bind 一个动态class
4. {iconSelected:!isActive} 表示 如果 isActive 是 false 的话，class是iconSelected
5. {iconSelected:isActive} 表示 如果 isActive 是 true 的话，class是iconSelected
6. 在data里面声明一个 isAcitve，默认为false
7. methods里面声明一个函数 change ，如果点击了就会切换 data 里面的 isActive 的值

综上所述，大概流程就是这样子了。

在此期间，碰到一些坑，写下来希望都记住：

1.为什么 v-on:click后面要加 .native?

官方文档说， .native作用是 监听根元素的原生事件

vue-router 的 router-link 会在渲染的时候，变成a标签，如果监听事件挂在 router-link上面，会获取不到，所以需要加上 .native

2.我一开始的思路是用 v-if ，看看能不能实现的 然后想着想着思路断了 看看有没有人帮忙实现一下

写下这个希望对大家有帮助，毕竟搜了一堆博客，没有一个能用的 :)