承接上文:Vue实战——路由的导航守卫与从后台获取数据,继续我们的继续我们的实战之旅,本项目Gitee地址:
https://gitee.com/vuejslearn/news-list.git
当我们启动项目后,发现首页有导航栏:
然后我们点击newAbout,发现依然有导航栏:
如果我们的项目中需要在一些页面中不显示导航栏,该怎么做呢?很简单,我们利用Router的元信息添加一个标志位,然后在主路由上对它动态的判断就可以了,具体的办法是:
编辑路由的配置文件:
在每个路由里,添加
meta: { showHeader: true }
首页路由为true,其余的路由页面为false,具体clone代码后可以查看。然后在app.vue的主路由上对其判断:
我们添加了
v-show="$route.meta.showHeader"
每次在挂载组件后,对其做判断,如果为false,就不显示了。这极大的方便了我们涉及我们的组件,后期我们会根据这个做新闻详情页。
现在我们重启项目发现,主页还有路由,但是newAbout页已经没有路由了。
原创不容易,鉴于本人水平有限,文中如有错误之处欢迎大家指正。以后我会持续发布vue实战系列的文档,喜欢的朋友欢迎关注。