App.vue組件代碼

<template>  <div>    <p>      <!--使用 router-link 組件進行導航 -->      <!--通過傳遞 `to` 來指定鏈接 -->      <!--設置將router-link渲染為span標簽，默認為a標簽-->      <router-link v-for="item in routerList" :to="'/' + item" custom v-slot="{ navigate }">        <span 
          :class="{spanC: true, activeS: item.split('/')[0] === isA}" 
          @click="navigate(),changeT(item)" 
          @keypress.enter="navigate" 
          role="link">
          {{item.split('/')[0]}}        </span>      </router-link>    </p>    <router-view></router-view>    <span>{{isA}}路由參數{{$route.params}}</span>  </div></template><script>  export default {    name: 'App',
    mounted() {      this.$router.push('/HelloWorld/HelloWorld')
    },
    data() {      return {        routerList: ['HelloWorld/HelloWorld',"HC/HC"],        isA: 'HelloWorld',
      }
    },    components: {
    },    methods: {
      changeT(item) {        this.isA = item.split('/')[0];
      },
    }
  }</script><style scoped>  body {    margin: 0px;    padding: 0px;
  }  .spanC {    padding: 15px;    border: 1px solid #ccc;
  }  .activeS {    background: red;
  }</style>

router.js代碼

import  { createRouter,createWebHashHistory }  from 'vue-router';import HelloWorld from "@/components/HelloWorld.vue";import HC from '@/components/HC.vue'// 1. 定義一些路由// 每個路由都需要映射到一個組件。const routes = [  // 動態字段以冒號開始
  { path: '/HC/:username', component: HC },
  { path: '/HelloWorld/:username', component: HelloWorld },  // 重定向
  { path: '/', redirect: '/HelloWorld' },
]// 2 創建路由實例并傳遞 `routes` 配置// 你可以在這里輸入更多的配置，但我們在這里暫時保持簡單const router = createRouter({  // 3. 內部提供了 history 模式的實現。為了簡單起見，我們在這里使用 hash 模式。  history: createWebHashHistory(),
  routes, // `routes: routes` 的縮寫})// 導出export {
  router
}

效果如下