vue2导航根据路由传值,而改变导航内容的实例

vue2导航根据路由传值,而改变导航内容的实例

在项目中，一般我们的导航都是长的基本一致，只是内容会根据上个页面的内容而改变。那么我们只需要把顶部导航作为独立的公共组件，这样方便哪里需要哪里引入组件即可。

公共导航代码如下：（mineHeader.vue）

{{mineHeaderData}}

其次eg：在某个页面中，有三个模块，需要根据不同的模块跳转到一个公共的组件，但是头部内容，要跟模块内容匹配。如下：

可用

已用

过期

最后界面如下：

然后我们需要点击每个模块，跳转到下个页面，并且导航内容也变成对应的内容。在其路由页面tiketOrder.vue页面需要如下写，

{{item.list}}

有效期

最后如下图：

这样就完成了。其实一个项目中，很多组件是可以复用的，这样我们可以少写很多组件。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。