vue路由控制页面（Vue实战利用路由元信息隐藏页面跳转后的主路由）

承接上文：Vue实战——路由的导航守卫与从后台获取数据，继续我们的继续我们的实战之旅，本项目Gitee地址：

https://gitee.com/vuejslearn/news-list.git

当我们启动项目后，发现首页有导航栏：

首页的导航栏

然后我们点击newAbout，发现依然有导航栏：

newAbout页面

如果我们的项目中需要在一些页面中不显示导航栏，该怎么做呢？很简单，我们利用Router的元信息添加一个标志位，然后在主路由上对它动态的判断就可以了，具体的办法是：

编辑路由的配置文件：

路由配置文件

在每个路由里，添加

meta: { showHeader: true }

首页路由为true，其余的路由页面为false，具体clone代码后可以查看。然后在app.vue的主路由上对其判断：

<div id="nav" v-show="$route.meta.showHeader"> <router-link to="/">Home</router-link> | <router-link to="/About">About</router-link> <router-link to="/newAbout">newAbout</router-link> </div>

我们添加了

v-show="$route.meta.showHeader"

每次在挂载组件后，对其做判断，如果为false，就不显示了。这极大的方便了我们涉及我们的组件，后期我们会根据这个做新闻详情页。

现在我们重启项目发现，主页还有路由，但是newAbout页已经没有路由了。

原创不容易，鉴于本人水平有限，文中如有错误之处欢迎大家指正。以后我会持续发布vue实战系列的文档，喜欢的朋友欢迎关注。