firebase - VueRouter/Firebase：在浏览器中输入的 URL 仅在输入两次时才会呈现动态路由

Question

我试图让 vue-router 在访问根 url 时重定向到由 Firebase 文档 id 构造的动态 url，如下所示：

const routes = [
  {
    path: "/",
    beforeEnter: async () => {
      let acuerdos = await db.collection("acuerdos").orderBy("fecha", "desc").get()
      let ultimoAcuerdo = acuerdos.docs[0].id
      router.push({ path: `/acuerdos/${ultimoAcuerdo}`})
    }
  }

在大多数情况下，这很好用。唯一的问题是，当重定向完成（例如 to /acuerdos/18-06-2020）并呈现视图时，如果我想输入另一个 url（例如 to /acuerdos/11-06-2020），它什么也做不了；但是如果我在同一个 url 上再次按回车，它会工作得很好。

作为记录，我曾经在从一条动态路径导航到另一条动态路径时遇到类似的问题，即使是在应用程序<router-link>的<router-view :key="$route.fullPath"/>. 所以也许答案是为key路由设置一个类似的道具，但我不知道如何从路由器的index.js文件中做到这一点。

感谢您的任何指点！

标签： firebasevue.jsasync-awaitvue-router

Answer 1

希望路由在路由器配置中定义；我在代码沙箱中复制了类似的东西，我能够让它工作。

唯一的区别是我在警卫中使用了该next方法，因为我不确定您从哪里获取路由器对象。router.pushbeforeEnter

beforeEnter(to, from, next) {
  next({ path: "/acuerdos/01-01-2001" });
}

你可以在这里试试

作为旁注，我更喜欢使用命名路由进行路由，因为它看起来更干净并且在我个人看来更可靠，

next({
  name: 'Acuerdos',
  params: {
    date: ultimoAcuerdo
  }
})

这样即使路由路径发生变化，您的代码也不会中断。