詳細ページに入り、下部のナビゲーションメニューを非表示にします

アプリプロジェクトを書いているときに、クライアントが下部のナビゲーションバーを非表示にして、クリックして詳細ページに入るときに表示されないようにするリクエストを追加し、以下の操作を確認しました。
まず、index.jsルーティングファイルでページルーティングを構成します

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

次に、App.vueファイルに、ナビゲーションナビゲーションコンポーネントが導入されている命令v-show =！hideNavを追加し
、デフォルト値をfalseに設定して、
このルートをリッスンします。

<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>

リストページから詳細をクリックすると、router-linkを直接使用できます。
画像をクリックして詳細を入力するとします（パラメータを詳細ページのインターフェイスにも渡します）

<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>

次に、私たちの詳細は主に機能を示すことです、あなたはあなたが望むものを示すことができます、私はより少なくします、あなたはあなたのプロジェクトが何を必要とするかを見ることができます

<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>