按名称和参数获取 vue-router 的路由

Posted 2023-02-22

【中文标题】按名称和参数获取 vue-router 的路由

【英文标题】：Get route by name and params for vue-router

【发布时间】：2017-08-13 03:35:57

【问题描述】：

我正在使用带有 vue-router 的 Vue。对于列表视图中的产品项目，我想生成 JSON-LN 注释，并将 url 属性设置为产品详细信息视图的路径。

我知道我可以使用this.$route.path 获取当前路线的路径，但是有没有办法获得一个独特的路线路径，因为它会用

呈现

<router-link :to=name: 'ProductDetail', params: id: some_id, slug: some_slug></router-link>

将路由的路径注入其他地方？

【问题讨论】：

嘿，Till，有没有关于如何构建 Vuejs 以获取产品 url 的详细信息？

@Mdunbavan 您能具体说明您面临的问题吗？下面发布了特定于路由器的答案。但另一个问题是，对于 JSON-LD，您需要指定不属于路由的完整 url。为此，我使用了这个解决方案：developmentnow.com/2016/07/13/webpack-injecting-server-urls

【参考方案1】：

您正在寻找Router instance's resolve method:

以与<router-link/> 相同的形式给出位置，返回具有以下已解析属性的对象：

  location: Location;
  route: Route;
  href: string;

在您的情况下，您可以执行以下操作来获取网址：

let props = this.$router.resolve( 
  name: 'ProductDetail',
  params:  id: some_id, slug: some_slug ,
);

return props.href;

【讨论】：

嗨，谢谢，这看起来很有希望。使用上面的道具，当您单击路线时，如何将其注入到产品详细信息的组件中？它会进入组件本身吗？

@Mdunbavan 为什么需要注入它？您可以通过this.$route.name和this.$route.params访问当前路由的名称和参数。

@thanksd 因为那确实会返回这条路线的信息，但不会返回其他路线的信息，这是 OP（和我自己）想要的。您的答案看起来会起作用。我正在尝试根据名称从不同的路线获取元数据，我认为这会起作用。如果你能做类似this.$router.ProductDetail... 这样的事情会很酷，但我想很明显为什么这不起作用。