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

3okqufwl  于 2022-12-23  发布在  Vue.js
关注(0)|答案(2)|浏览(163)

我正在使用vue-menu组件,并使用它在不同的路由之间切换。切换到另一个路由后,我希望在下拉标题中显示当前的路由名称,如下所示:

我试过使用beforeCreate , created, mounted...等生命周期方法,但是没有一个被调用。我怎样才能达到预期的结果?

hfyxw5xn

hfyxw5xn1#

你应该用“手表”

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

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

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

qnakjoqk2#

<script>
export default {
  computed:{
     routeName(){
       return this.$route.name
    },
  }
};
</script>
<template>
  <p>Current Route is {{$route.name}}</p>
</template>
  • ---------------或---------------
<script>
    export default {
      computed:{
         routePath(){
           return this.$route.path 
        },
      }
    };
    </script>
    <template>
          <p>Current Route is {{$route.path}}</p>
        </template>

此答案适用于vue 2。
此外,还可以通过直接返回以下路径示例来使用创建的生命周期

created() {
    return this.$route.name
  },

相关问题