Question

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

我正在尝试通过以下方式获取此数据

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

但是很奇怪的是，这显示了先前的路由（单击链接的组件，而不是当前组件）。如果我愿意

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

currentRoute显示正确的路由。

作为参考，我的普通标签链接如下：

<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>

我的嵌套路由链接如下：

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

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

非常感谢您！

Answer 1

尝试使用this.$f7route代替this.$f7router.currentRoute。

$ route或$ f7route   （对象）

当前路线。包含带有路由查询，哈希，参数，路径和url的对象

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

$ f7router显示正确的“ currentRoute”，但$ f7router.currentRoute显示先前的路由

1 个答案: