切换标签后传递道具值

Question

我有一个包含两个选项卡的标题页。这两个选项卡指向两个不同的页面。我正在使用我在系统页面的标题页面路由器视图中定义的area 属性。当我在系统页面上时它工作正常，但是当我转到产品选项卡并返回系统选项卡时，系统选项卡中的道具 失去价值。它在道具中显示为字符串"area"。我希望在切换标签时获得相同的值。

    <div class="tabs">
      <ul>
        <li @click="$router.push({ name: 'system' })">
          <a>SYSTEM</a>
        </li>
        <li @click="$router.push({ name: 'product' })">
          <a>Product</a>
        </li>
      </ul>
    </div>
  <router-view :area="area"/>
  </div>
</template>

系统视图：

export default {
props: ['area'],

Answer 1

您最好使用<router-link>，而不是使用@click 绑定，特别是因为您使用的是router-view

这将允许您在应用中简单地传递参数。

https://router.vuejs.org/api/

你这样声明你的路线

const routes = [
  {
    path: '/glossary/:subjectName',
    name: 'glossaryWithParams',
    component: GlossaryPage,
  },
]

然后在您的代码中，您可以像这样简单地构建元素：

 <router-link
  :to="`/glossary/${subjectName}`"
  class="tabs__link"
>
    Subject Glossary
</router-link>
    ```

Once you implement Router-link your history push state will also be resolved, and your params will work normally.