如何解决切换制表符后传递属性值
我有一个包含两个标签的标题页。这两个标签指向两个不同的页面。我正在使用我在系统页面的页眉路由器视图中定义的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'],
解决方法
使用<router-link>
会比使用@click绑定好得多,尤其是因为您正在使用router-view
这将允许您仅在应用程序中传递参数。
您像这样声明路线
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.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。