vue.js - 如何在 Vuejs 中触发挂载事件

Question

我有一个侧边栏，您可以在下面看到：

<template>
        <section>
            <div class="sidebar">
                <router-link v-for="(element, index) in sidebar" :key="index" :to="{ name: routes[index] }" :class='{active : (index==currentIndex)  }'>{{ element }}</router-link>
            </div>

            <div class="sidebar-content">
                    <div v-if="currentIndex === 0">
                        Profile
                    </div>
                    <div v-if="currentIndex === 1">
                        Meine Tickets
                    </div>
            </div>
        </section>
</template>
<script>

    export default {
        mounted() {
            EventBus.$on(GENERAL_APP_CONSTANTS.Events.CheckAuthentication, () => {
                this.authenticated = authHelper.validAuthentication();
            });
            console.log()
            this.checkRouter();
        },
        data(){
            return {
                currentIndex:0,
                isActive: false,
                sidebar: ["Profile", "Meine Tickets"],
                routes: ["profile", "my-tickets"],
                authenticated: authHelper.validAuthentication(),
            }
        },
        computed: {
            getUser() {
                return this.$store.state.user;
            },
        },
        methods: {
            changeSidebar(index) {
                this.object = this.sidebar[index].products;
                this.currentIndex=index;
            },
            checkRouter() {
                let router = this.$router.currentRoute.name;
                console.log(router);
                if(router == 'profile') {
                    this.currentIndex = 0;
                } else if(router == 'my-tickets') {
                    this.currentIndex = 1;
                }
            },
        },
    }
</script>

因此，当单击侧边栏中的链接时，路线将更改为“http://.../my-account/profile”或“http://.../my-account/my-tickets”。但问题是 currentIndex 因此没有改变，内容没有改变，而且我也无法将活动类添加到链接中。那么您认为我可以如何根据路线更改 currentIndex。如果我触发一个事件，你能帮我解决这个问题吗，因为我不知道如何在 Vue 中执行它。我尝试编写一个类似 checkRouter() 的函数，但没有成功。为什么你认为它正在发生？所有解决方案将不胜感激。

Answer 1

因此，如果我理解正确，您想currentIndex成为基于当前活动路线的值吗？您可以将其创建为计算属性：

currentIndex: function(){
    let route = this.$router.currentRoute.name;
    
    if(router == 'profile') {
        return 0;
    } else if(router == 'my-tickets') {
        return 1;
    }
}

我认为你可以比现在更多地利用 Vue 的反应性，不需要同一个元素的多个副本，你可以让属性是反应性的。

<div class="sidebar-content">
    {{ sidebar[currentIndex] }}
</div>

此外，您可能会考虑object成为一个计算属性，如下所示：

computed: {
    getUser() {
        return this.$store.state.user;
    },
    object() {
        return this.sidebar[currentIndex].products;
    }
},

Answer 2

只需this.$route在任何组件模板中使用。Docs。您无需自定义逻辑即可轻松完成checkRouter() currentIndex。看简单的例子：

<div class="sidebar-content">
     <div v-if="$route.name === 'profile'">
          Profile
      </div>
      <div v-if="$route.name === 'my-tickets'">
          Meine Tickets
       </div>
     </div>