我如何以正确的方式获得活动路线？

Posted 2023-02-22

【中文标题】我如何以正确的方式获得活动路线？

【英文标题】：How do i get the active route the correct way?

【发布时间】：2019-12-19 00:05:57

【问题描述】：

我正在使用典型的 Vue 路由器配置 as shown in their guide。我想要的是在router-view 之外显示所显示路线的名称。所以我需要询问路由器哪个路由是活动的。

我有found in the router API，它有一个currentRoute 属性，我希望它能给我活动路线，我会读它的名字，然后我就可以了。

为了测试这一点，我像这样导入了路由器：

import router from '@/router.js';

然后尝试读取活动路由的名称：

data: function()
    return 
        test: router.currentRoute.name
    

并用 test 显示它。

它似乎在做我想做的事，但它非常不一致且不可靠。我在任何地方都没有收到任何错误，路线名称也没有出现，而且似乎不起作用。但是（有时）如果我更改组件模板中的某些内容，例如删除元素或添加元素，并且 Vue 热重新加载我的应用程序，路由名称会出现并继续工作。从那里，如果我刷新，它不会再次出现。

我做错了什么，读取活动路由名称的正确方法是什么？

---

子问题

为此使用router.beforeEach 是个好主意吗？因为这似乎工作正常，但这似乎是一种错误的方法......

【问题讨论】：

你试过了吗？？？ ***.com/questions/53126710/…

@kcsujeet 感谢您的建议，我创建了一个计算属性并从中执行：return router.currentRoute.name;。同样的事情会发生，在热重载后，路由名称出现，刷新后消失。

【参考方案1】：

路由对象表示当前活动路由的状态。它 包含当前 URL 的解析信息和路由记录 由 URL 匹配。

Reference.

您可以通过this.$route;访问当前路由对象。