vue.js - Vuejs如何在不退出该组件的情况下更改组件中的URL

Question

我是 VueJs 的新手。

我正在与 wizaplace 合作。实际上，我有一条名为 /breweries/:id 的路线，它采用 wizaplace 公司的 id（API 只需要一个 ID 即可获取公司）来调用 wizaplace API 并获取公司信息。

在这些数据中，我想在 url 中显示一个 slug 而不是 ID。

请问我怎么能做到这一点？

我是否应该做一个“桥接”组件，通过其 id 获取公司的数据并将 id 和 slug 推送到另一个端组件，该组件将再次获得公司的 ID，但在 URL 中显示 $route.params.slug ？

我知道这不是一种正确的工作方式，但这是我创业的需要。

谢谢你的帮助 ！

标签： vue.jsnuxt.jsvue-i18nnuxt-i18n

Answer 1

如果你想要一些:name_slug而不是你必须通过这个instad:id来解决这个地方，所以 API 应该被扩展/改变。或者如果有固定数量的地方，并且你知道所有地方，只需编写一些转换为的函数slugidslugid

function getIdBySlug(slug){
    //as Json
  const slugsMap = [
    {'i' : 1, 's': 'slug1' },
    {'i' : 2, 's': 'foo' },
    {'i' : 5, 's': 'bar' },
    {'i' : 8, 's': 'kek' }
  ]
  
  const toFind =  slugsMap.find(e=> e.s === slug)
  return toFind ? toFind.i : false
}
// usage
const ID = getIdBySlug('bar');

示例：https ://jsfiddle.net/19kxnuLy/