场景要求:实现根据嵌套路由中的 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>