回顾之前的代码
我们在my-vue-project\src\router\index.js中的代码如下:
// 什么是路由?路由就是url地址和组件的对应关系
// 1.引入vue-router
import { createRouter, createWebHashHistory } from 'vue-router'// 2.定义路由
const routes = [{path: '/', // 路由路径name: 'main', // 路由名称component: () => import('@/views/Main.vue') // 路由组件},
]// 创建路由实例
const router = createRouter({// 设置路由模式, hash模式history: createWebHashHistory(),routes, // 注入路由配置
})// 3.导出路由
export default router
表示我们定义了一个url路径:'/'(即默认路径/)与Main.vue组件的对应关系,然后当项目启动后就默认进到默认路径 '/' 中,即会显示Main.vue路由。Mian.vue组件具体显示在App.vue的路由视图<router-view></router-view>标签的位置。
1.新建组件
在src/views/文件夹下新建Home.vue、Mall.vue、User.vue、Page1.vue、Page2.vue组件,组件内容如下:
<template><div>home组件(如果是其他组件的话名字修改一下)</div>
</template><script setup></script><style lang="less" scoped></style>
2.修改路由配置
my-vue-project\src\router\index.js
// 什么是路由?路由就是url地址和组件的对应关系// 1.引入vue-router
import { createRouter, createWebHashHistory } from "vue-router";// 2.定义路由
const routes = [{path: "/",name: "main",component: () => import("@/views/Main.vue"),redirect: "/home", //路由重定向children: [{path: "home",name: "home",component: () => import("@/views/Home.vue"),},{path: "user",name: "user",component: () => import("@/views/User.vue"),},{path: "mall",name: "mall",component: () => import("@/views/Mall.vue"),},{path: "page1",name: "page1",component: () => import("@/views/Page1.vue"),},{path: "page2",name: "page2",component: () => import("@/views/Page2.vue"),},],},
];// 创建路由实例
const router = createRouter({// 设置路由模式, hash模式history: createWebHashHistory(),routes, // 注入路由配置
});// 3.导出路由
export default router;
3.为Mian.vue的子路由设置路由视图
在Main.vue中的el-main标签内部添加<router-view></router-view>路由视图,表示其子路由会显示在这个位置。
-- 在地址栏输入url地址验证
默认地址页面http://localhost:5173/#/ 会重定向到 http://localhost:5173/#/home,显示
地址页面http://localhost:5173/#/user,显示:
很棒!
5.配置左侧菜单栏与路由的联动
实现点击左侧菜单栏,右侧显示菜单栏项对应的组件。(即我们上一步实现的是地址栏URL与右侧组件的一一对应,现在实现左侧菜单栏与右侧组件的对应)
在CommonAside.vue组件中,找到标签el-menu-item(一共有两个),添加点击事件@click="handleMenu(传参)"
<!-- 循环遍历菜单栏 -->
<!-- 1.没有子菜单的遍历 -->
<el-menu-item @click="handleMenu(item)" v-for="item in noChildren" :key="item.path" :index="item.path">
<!-- 循环遍历子菜单 -->
<el-menu-item @click="handleMenu(child)" v-for="child in item.children" :key="child.path" :index="child.path">
<!-- 动态获取icon图标 -->
<component :is="child.icon" class="icons"></component>
<!-- 显示文字内容 -->
<span>{{ child.label }}</span>
</el-menu-item>
继续在script中添加代码:
// 路由
import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
// handleMenu方法的实现
const handleMenu = (item) => {
router.push(item.path)
}
router.push()
是 Vue Router 提供的一个方法,用于在单页面应用(SPA)中进行路由跳转。
这个方法会改变浏览器的历史记录,并加载对应路径的组件,而不会刷新页面。
即CommonAside.vue修改后的完整代码为:
<template><!-- 首先最外层是Main.vue中注释的<el-aside width="200px" class="el-aside">Aside</el-aside>,我们将侧边栏改成我们自定义的组件,通过common-aside引入我们自己写的组件 --><el-aside :width="width" class="el-aside"><el-menu background-color="#545c64" text-color="#fff" :collapse="isCollapse" :collapse-transition="false"><!-- 写菜单栏的大标题————通用后台管理系统 --><h3 v-show="!isCollapse">通用后台管理系统</h3><h3 v-show="isCollapse">后台</h3><!-- 循环遍历菜单栏 --><!-- 1.没有子菜单的遍历 --><el-menu-item @click="handleMenu(item)" v-for="item in noChildren" :key="item.path" :index="item.path"><!-- <el-icon><icon-menu /></el-icon> --><!-- 动态获取icon图标 --><component :is="item.icon" class="icons"></component><!-- 显示文字内容 --><span>{{ item.label }}</span></el-menu-item><!-- 2.有子菜单的遍历 --><el-sub-menu v-for="item in hasChildren" :key="item.path" :index="item.path"><template #title><!-- 动态获取icon图标 --><component :is="item.icon" class="icons"></component><!-- 显示文字内容 --><span>{{ item.label }}</span></template><!-- 分组 --><el-menu-item-group><!-- 循环遍历子菜单 --><el-menu-item @click="handleMenu(child)" v-for="child in item.children" :key="child.path":index="child.path"><!-- 动态获取icon图标 --><component :is="child.icon" class="icons"></component><!-- 显示文字内容 --><span>{{ child.label }}</span></el-menu-item></el-menu-item-group></el-sub-menu></el-menu></el-aside>
</template><script setup>
import { ref, computed } from 'vue'
import { storeToRefs } from 'pinia';
import { useAllDateStore } from '@/stores/index';
// 获取 store 实例
const store = useAllDateStore();
// 使用 storeToRefs 解构响应式属性
const { isCollapse } = storeToRefs(store);
// 根据 isCollapse 来计算宽度
const width = computed(() => isCollapse.value ? '64px' : '200px')const list = ref([{path: '/home',name: 'home',label: '首页',icon: 'house',url: 'Home'},{path: '/mall',name: 'mall',label: '商品管理',icon: 'video-play',url: 'Mall'},{path: '/user',name: 'user',label: '用户管理',icon: 'user',url: 'User'},{path: 'other',label: '其他',icon: 'location',children: [{path: '/page1',name: 'page1',label: '页面1',icon: 'setting',url: 'Page1'},{path: '/page2',name: 'page2',label: '页面2',icon: 'setting',url: 'Page2'}]}
])
const noChildren = computed(() => list.value.filter(item => !item.children))
const hasChildren = computed(() => list.value.filter(item => item.children))// 路由
import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
// handleMenu方法的实现
const handleMenu = (item) => {router.push(item.path)
}
</script><style lang="less" scoped>
.icons {width: 18px;height: 18px;margin-right: 5px;
}.el-menu {border-right: none;h3 {line-height: 48px;color: #fff;text-align: center;}
}.el-aside {height: 100%;background-color: #545c64;
}
</style>
--点击左侧菜单栏验证
点击“商品管理”:
点击“页面1”:
成功!
项目源代码:
通过百度网盘分享的文件:实现路由
链接:https://pan.baidu.com/s/1WaOLqig2MV-x-nv1M-6bMA?pwd=6666
提取码:6666