2

我不知道我很 Vue，花了一天时间学习所有 hooks 路线，尝试通过常规 hooks created，mounted它仍然给了我null. 这是我的组件应用程序，所有其他组件都插入其中。我在这里调用mounted钩子，所以基本上它完全渲染了这个组件，我们有一个路径+我包裹了 evrythin$nextTick只是为了确定它仍然返回我null的名字如果我不是从主 url 而是从子项（例如 url/boys）访问网站，则当前路由器。我很久以前就放弃了在需要它的子组件中获取路由器的这个名称，我想好吧，我只是将它传递给孩子<the-nav/>这就是我需要它的地方。但它在父母中不起作用，当我进入网站时我只需要当前路由器的名称。就是这样，听起来很容易，但经历了地狱。

<template>
      <div id="app">
        <the-header/>
        <the-nav/>
        <div id="app__inner">
          <transition name="fade" mode="out-in">
            <router-view />
          </transition>
        </div>
      </div>
    </template>

    <script>
      import TheHeader from "@/components/TheHeader.vue";
      import TheNav from "@/components/TheNav.vue"

      export default {
        components : {
          TheHeader,
          TheNav
        },
        mounted()
        {
          this.$nextTick(() => {
            console.log(this.$router.currentRoute.name);
          })
        }
      }
    </script>
4

2 回答 2

0

您实际上可以在这个 befoureRouteEnter 函数中使用公开的路由器函数，如下所示：


beforeRouteEnter (to, from, next) {
    console.log(to.name);
    next();
  },

请阅读有关路由器导航防护的一些文档： https ://router.vuejs.org/guide/advanced/navigation-guards.html

于 2020-06-15T21:38:10.137 回答
0

确保你有name路由器上的设置，否则name将undefined。例如...

const routes = [
  { 
    path: "/", 
    component: Home, 
    name: "Home"  // Make sure route is named
  },
];

然后在组件中，您应该能够访问挂载钩子中的名称，而无需nextTick（如评论中所述）：

mounted() {
  alert(`Route name is: ${this.$route.name}`);
}

演示

于 2020-06-19T17:24:30.587 回答