位置: 编程技术 - 正文
推荐整理分享vue2导航根据路由传值,而改变导航内容的实例(vue导航组件),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:vue项目nav导航栏的实现,vue地图轨迹,vue地图导航,vuerouter有哪些导航钩子,vue项目nav导航栏的实现,vue地图导航,vue地图导航,vue地图轨迹,内容如对您有帮助,希望把文章链接给更多的朋友!
在项目中,一般我们的导航都是长的基本一致,只是内容会根据上个页面的内容而改变。那么我们只需要把顶部导航作为独立的公共组件,这样方便哪里需要哪里引入组件即可。
公共导航代码如下:(mineHeader.vue)
其次eg:在某个页面中,有三个模块,需要根据不同的模块跳转到一个公共的组件,但是头部内容,要跟模块内容匹配。如下:
最后界面如下:
然后我们需要点击每个模块,跳转到下个页面,并且导航内容也变成对应的内容。在其路由页面tiketOrder.vue页面需要如下写,
最后如下图:
这样就完成了。其实一个项目中,很多组件是可以复用的,这样我们可以少写很多组件。
以上这篇vue2导航根据路由传值,而改变导航内容的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持积木网。
详解Vue如何支持JSX语法 通常开发vue我们使用的是模板语法,其实还有和react相同的语法,那就是render函数,同样支持jsx语法。Vue的模板实际是编译成了render函数。1.传统的createE
vue父组件向子组件动态传值的两种方法 在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件
vue jsx 使用指南及vue.js 使用jsx语法的方法 vuejsx语法与reactjsx还是有些不一样,在这里记录下。letcomponent=null//if语句if(true){component=(div/div);}else{component=(div/div);}varul=(ul{component}/ul);//map语句varcoms=limit
标签: vue导航组件
本文链接地址:https://www.jiuchutong.com/biancheng/377365.html 转载请保留说明!上一篇:vue router-link传参以及参数的使用实例(vue router 传参)
友情链接: 武汉网站建设