Enter the details page, hide the bottom navigation menu

Once when I was writing an app project, the client added a request that the navigation bar at the bottom be hidden and not displayed when clicking to enter the details page, and then look at the operation below.
We first configure our page routing in the index.js routing file

{
	path： '/detail/:id',
	name: 'Detail',
	component: ()=> import ('../views/Detail.vue'),
	meta: {
		hideNav: true, // 是否隐藏底部导航
	}
}

Then we add the instruction v-show = ! hideNav to the place where the navigation Nav component is introduced in the App.vue file
and set the default value to false
and listen to this route

<Nav v-show=!hideNav>	</Nav> // 默认展示
<script>
	data() {
	    return {
	    	hideNav: false
	    };
	  },
	watch: { // 监听路由 $route
		$route(){
			if(this.$route.meta.hideNav) { // 如果路由中的meta标记有存在hideNav
				this.hideNav = true // 那么这个标记展示，因为取反了就不显示了
			}else{
			this.hideNav = false
			}
		}
	}
</script>

Suppose we click into the details from the list page, then we can use router-link directly.
Suppose we click on the picture to enter the details (pass the parameters to the details page interface as well)

<router-link
  :to="{
    name: 'Detail',
    params: {
      id: product._id,
    },
  }"
>
  <img
    :src="
      product.coverImg
        ? product.coverImg
        : 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3055768216,2672833891&fm=11&gp=0.jpg'
    "
    alt
  />
</router-link>

Then our details are mainly to show the function, you can show what you want, I will do less, you can see what your project needs

<template>
  <div class="detai">
    <h1>详情页</h1>
    <p>{
   
   { product.name }}</p>
  </div>
</template>
<script>
import { getOneProduct } from "../services/products"; // 详情接口
export default {
  data() {
    return {
      product: {}, // []
    };
  },
  async created() {
    const res = await getOneProduct(this.$route.params.id); // 接口传递过来的ID 值
   	 this.product = res.data;
  },
};
</script>