如何在 Vue 中获取路由器的当前名称?

Question

在应用程序中包含nav组件，我想做的是，如果您不是通过主页访问网站，而是从子页面访问网站，例如some_url/boys它在导航中选择该块。所以我在想获取路由器名称的最佳方法是什么？我想可能直接Nav组件的帮助下beforeRouteUpdate钩子得到路由器的名称，但它根本不想输入它。这是我的组件的逻辑

import MenuBar from "@/store/menu.js";
export default {
namespaced: true,
name: "TheNav",
data(){
return {
menu: MenuBar.navBar
}
},
beforeRouteUpdate (to, from, next) { // dosn't print anything!
console.log(1);
console.log(this.$route.name);
next()
},
methods: {
ft_click(e, i) // that's animation method, nevermind
{
this.menu.forEach( (el) => {
el.styleNavBar.width = 0 + '%';
el.active = false;
})
this.menu[i].active = true;
this.menu[i].styleNavBar.width = 80 + '%';
},
ft_hover(e, i, width) // that's animation method, nevermind
{
if(this.menu[i].active !== true)
this.menu[i].styleNavBar.width = width + '%';
}
}
}

所以同样的问题，如何在 Vue 中获取路由器的当前名称？或者为什么我的钩子不想工作(((

Answer 1

由此你可以得到一个想法，即当调用beforeRouteUpdate时，不清楚$route更新。beforeRouteUpdate用于确定批准或阻止next。可以使用计算或监视属性获取当前名称。