$f7router 显示正确的 "currentRoute" 但 $f7router.currentRoute 显示以前的路线

Question

我正在使用 VueJS 和 Framework7 开发选项卡视图应用程序。我有 f7-links，每个打开一个 f7-view element（所以不是实际的选项卡元素）。在其中一个选项卡中，我想使用 f7-link-item 和 link 参数进行嵌套导航。我正在使用相同的组件来呈现此页面，但我需要将数据传递给每个 link 以确定单击了哪个 link（并知道要呈现的内容）。

我正在尝试使用

获取此数据

created() {
  console.log(this.$f7router.currentRoute);
}

但奇怪的是，这显示了之前的路由（link 被点击的组件，而不是当前组件）。如果我这样做

created() {
  console.log(this.$f7router);
}

然后当前路线显示正确。

供参考，我的普通标签link是这样的：

<f7-toolbar tabbar labels bottom id="toolbar">
  <f7-link tab-link="#view-menu" tab-link-active text="Menu"></f7-link>
</f7-toolbar>
<f7-view id="view-menu" main tab tab-active url="/menu/"></f7-view>

而我的嵌套路由link是这样的：

<f7-list-item link="/product/0" class="product-link">
  Coffee
</f7-list-item>

路由本身很好，我只是不明白如何传递我想要的道具以及为什么 currentRoute 参数不起作用。

非常感谢！

Answer 1

尝试使用 this.$f7route 而不是 this.$f7router.currentRoute。

$route or $f7route (object)

Current route. Contains object with route query, hash, params, path and url

https://framework7.io/docs/router-component.html#component-context

$f7router 显示正确的 "currentRoute" 但 $f7router.currentRoute 显示以前的路线

$f7router shows the correct "currentRoute" but $f7router.currentRoute shows previous route

vue.js

html-framework-7

vue-router