Vuejs获取当前路线名称并显示在菜单上

Question

我正在使用vue-menu组件，并使用它在不同的路线之间切换。切换到另一条路线后，我想在下拉标题上显示当前路线名称，如下所示：

我尝试使用生命周期方法，例如beforeCreate , created, mounted...等，但是没有一个被调用。如何获得理想的结果？

Answer 1

您应该使用“手表”

data() {
    return {
        routeName: null,
    };
},

watch: {
    '$route': 'currentRoute'
},

methods: {
    currentRoute() {
        this.$nextTick(() => {
            this.routeName = this.$route.name
        });
    }
},