前端学习---实现根据嵌套路由中的 project/:id 的不同 id 值来设置不同的地址

场景要求：实现根据嵌套路由中的 project/:id 的不同 id 值来设置不同的地址

方案：

使用动态路由来实现这个目标，以下是一个示例代码，演示如何根据不同的 id 值加载不同的组件和地址：

index.js文件代码示例：

import { createRouter, createWebHashHistory } from 'vue-router'
import Login from '../components/Login.vue'

const routes = [
  { path: '/login',
      component: Login,
      name:'login'
    },
    { path: '/home',
      name:'home',
      //导入组件（地址）
      component: ()=> import('../components/Home.vue'),
      //嵌套路由
      children: [
        { path: '/cases/:id',
          component: ()=> import('../components/Cases.vue'),
          name:'cases'
        },
        { path: '/project/:id',
          component: ()=> import('../components/ProjectDynamic.vue'),//导入另一个路由地址具体设置
          name:'project',
          props:true  // 将路由参数作为组件的 props
        }
      ]
    }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})
export default router

ProjectDynamic.vue文件代码示例：

<template>
	<!--  来根据不同的 id 动态渲染不同的组件-->
  <component :is="selectedComponent"></component>
</template>

<script>
  //导入组件地址
  import Project from '../components/Project.vue';
  import Project2 from '../components/Project2.vue';

  export default {
    props: ['id'],
    components: {
      // 在这里注册名为 'Project' 和 'Project2' 的组件
      Project,
      Project2
    },
    computed: {
      selectedComponent() {
        if (this.id === '1') {
          return 'Project';
        } else if (this.id === '123') {
          return  'Project2';
        } else {
          return  'Project';
        }
      }
    }
  };
</script>

在页面渲染代码示例：

<el-menu-item index="/project/1" >
  <el-icon :size="20" style="margin-bottom:7px;margin-right:5px;color:#FFFFFF;"><List /></el-icon>
  <span>界面project1</span>
</el-menu-item>
<el-menu-item index="/project/123" >
  <!--命名路由-->
  <router-link :to="{ name: 'project', params: { id: '123' }}"
          style="text-decoration: none;color:#fff;" class="menu-link">
      <el-icon :size="20" style="margin-bottom:7px;margin-right:5px;color:#FFFFFF;"><Grid /></el-icon>
       <span>界面3project</span>
  </router-link>
</el-menu-item>