一、自定义组件传值

在每个页面中，向页头组件 MyHearder.vue 传入当前页面对应的 pageIndex 值，从而控制页头右上角链接的样式

• 子组件 MyHearder.vue 中定义props

<script setup>
    //需要引入 defineProps 
    import { ref, defineProps } from 'vue';
    const strHeader = ref("MyGame!");
    // 定义子组件要接收的变量数组
    defineProps(['pageIndex']);
</script>

• 修改导航布局代码，根据父组件传入的pageIndex，动态控制样式

<div class="nav">
    <div :class="pageIndex==1 ? 'selected':'' " >英雄联盟</div>
    <div :class="pageIndex==2 ? 'selected':'' " >王者荣耀</div>
    <div :class="pageIndex==3 ? 'selected':'' " >我的</div>
</div>

• 在父页面 LolView.vue 中，调用 MyHearder 时传入 pageIndex 的值

LolView.vue

<template>
  <!-- 页头组件 -->
  <MyHeader pageIndex="1" />
  <div class="myContent">
    <h1>英雄联盟</h1>
  </div>
  <MyFooter />
</template>

• 同理可设置 MobaView.vue 及 MineView.vue 在调用页头组件时，pageIndex 分别传入 2 和 3 的值

MobaView.vue

<template>
  <MyHeader pageIndex="2" />

  <div class="myContent">
    <h1>王者荣耀</h1>
  </div>

  <MyFooter /> 
</template>

<script setup>
  // 引入页头页脚组件文件
  import MyHeader from '@/components/MyHeader.vue'
  import MyFooter from '@/components/MyFooter.vue'
</script>

MineView.vue

<template>
  <MyHeader pageIndex="3" />

  <div class="myContent">
    <h1>我的</h1>
  </div>

  <MyFooter /> 
</template>

<script setup>
  // 引入页头页脚组件文件
  import MyHeader from '@/components/MyHeader.vue'
  import MyFooter from '@/components/MyFooter.vue'
</script>

（4）预览测试

英雄联盟页面 导航样式

王者荣耀页面 导航样式

我的页面 导航样式

二、静态链接跳转

（1）修改 MyHeader.vue 组件

在导航上增加 router-link 标签，跳转对应页面

<div class="nav">
      <div :class="pageIndex==1 ? 'selected':'' " >
          <router-link to="/">英雄联盟</router-link>
      </div>
      <div :class="pageIndex==2 ? 'selected':'' " >
          <router-link to="/moba">王者荣耀</router-link>
       </div>
       <div :class="pageIndex==3 ? 'selected':'' " >
           <router-link to="/mine">我的</router-link>
       </div>
 </div>

（2）去掉 a 链接默认样式

在 App.vue 中，增加全局a链接样式

a{
  text-decoration: none;
  color: #333;
}

三、动态函数跳转

在布局中增加点击事件

<template>
  <div class="login">
    <h1>This is an Login Page</h1>
    <el-button @click="gotoIndexPage()">进入主界面</el-button>
  </div>
</template>

在js中编写跳转函数

<script setup>
  import { useRouter } from "vue-router";
  const router = useRouter();

  function gotoIndexPage(){
    console.log("gogogogo");
    router.push("/")
  }
</script>