In the bottom navigation bar in vue.js, how to display the first-level route and the solution for not displaying the sub-route?

Below I will share with you a solution to the vue.js bottom navigation bar display of first-level routes and non-display of sub-routes. It has a good reference value and I hope it will be helpful to everyone.

Recently developed a webapp using vue third-party UI MuseUI, and then a problem occurred in the navigation bar. I need to display the bottom navigation bar on several routes on the navigation bar, but not on other routes. That's it. The problem is that the bottom navigation bar of MuseUI is loaded directly into app.vue. Each page will have a navigation bar, so this method is not feasible. Later, I really tried my best to ask questions on GitHub, the author of MuseUI, but to no avail. I went to segmentfault to ask questions, but to no avail. I went to Vue official group to ask questions, to no avail. Before asking the question, I searched and thought about it, but these all made me collapse. Possible errors ranged from routing URLs, museUI usage bugs, to adding hook functions. They were all expected, but none of them were true. It doesn't matter. Persistence is victory. It may be that my efforts moved God and I found a solution.

router.js

const router = new VueRouter({
 mode: 'history',
 routes: [
  { path: '/first', component: firstView, meta: { navShow: true, cname: '一级页面' }, name: 'first' },
  { path: '/sub', component: subView, meta: { navShow: false, cname: '子页面' }, name: 'sub' },
 ],
});

app.vue

<Bar v-show="$route.meta.navShow">

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed analysis of several easily overlooked parts of the Vue document

Using jointjs in vue Method

Let’s talk about the simple method of using Baidu Map under Vue

##

The above is the detailed content of In the bottom navigation bar in vue.js, how to display the first-level route and the solution for not displaying the sub-route?. For more information, please follow other related articles on the PHP Chinese website!