从另一个文件更改元素样式的方法

Question

我正在制作一个 PWA，并且我有一个出现在 PWA 的所有页面中的 MenuBar，但我想根据我目前所在的页面更改 MenuBar 图标。我给你看图片看看是怎么回事：

我想让它看起来像这样：

这是菜单栏代码：

<template>
    <nav>
        <div class="divMenuOpcoes">
            <div><router-link to="/"><img src="../assets/homeIcon2.png"></router-link></div>
            <div><router-link to="/criarpostagem"><img src="../assets/addIcon.png"></router-link></div>
            <div><img src="../assets/newsIcon.png"></div>
            <div><img src="../assets/userIcon.png" v-on:click="redirectPerfilLogin"></div>
        </div>
    </nav>
</template>

<script>
import { useStore } from 'vuex'

export default {
    name: 'MenuBar',
    setup() {

        const store = useStore()
        const redirectPerfilLogin = () => {

            const token = store.getters.getToken
            if(!token){
                window.location.href='/login'
            }else {
                store.dispatch('validateSessionAction', token)
                store.commit('SET_SWAP', true)
                window.location.href='/perfil'
            }
        }
        return {redirectPerfilLogin}
    }
}

</script>

<style lang="scss" scoped>
    @import "../assets/stylesheets/pallete.scss";

    nav{
        bottom: 0;
        position: fixed;
        display: flex;

        height: 70px;
        width: 100%;

        background-color: $colorBranca;
        border-top: 1px solid $colorCinza;
    }   

    .divMenuOpcoes{
        display: flex;
        width: 100%;
        max-width: 400px;
        margin: 10px 20px;

        & div{
            display: flex;
            justify-content: center;

            height: 100%;
            flex: 1;
            
            & img{
                display: block;

                margin: auto;
                height: 30px;
                padding: 10px 15px;

                cursor: pointer;
            }
        }
    }   
</style>

我已经将所有蓝色图像与其他人的名称相同，但名称末尾有 2。谢谢！

Answer 1

我想出了以下解决方案。数据块中的变量图标是反应式的。这意味着每当其值更改时，模板中的链接项都会更新。 （在本例中为图像来源。

我添加了一个监视路线变化的观察者。每当路线改变时，相应的来源就会更新。

<template>
    <nav>
        <div class="divMenuOpcoes">
            <div><router-link to="/"><img :src="../assets/" + this.icons['/'] + ".png"></router-link></div>
            <div><router-link to="/criarpostagem"><img src="../assets/" + this.icons['/criarpostagem'] + ".png"></router-link></div>
            <div><img src="../assets/newsIcon.png"></div>
            <div><img src="../assets/userIcon.png" v-on:click="redirectPerfilLogin"></div>
        </div>
    </nav>
</template>

<script>
import { useStore } from 'vuex'
export default {
    name: 'MenuBar',
    data: {
        icons: {
            "/": "homeIcon2",
            "/criarpostagem": "addIcon"
        }
    }
    setup() {
        const store = useStore()
        const redirectPerfilLogin = () => {
            const token = store.getters.getToken
            if(!token){
                window.location.href='/login'
            }else {
                store.dispatch('validateSessionAction', token)
                store.commit('SET_SWAP', true)
                window.location.href='/perfil'
            }
        }
        return {redirectPerfilLogin}
    },
    watch:{
        $route (to, from){
            this.icons[to] = this.icons[to] + '2'
            this.icons[from] = this.icons[from].replace('2', '')
        }
    } 
}
</script>

我自己没有测试过这段代码，但如果它有效，请告诉我。