Vue实训---5-路由搭建
回顾之前的代码
我们在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
原文地址：https://blog.csdn.net/qq_40930841/article/details/144065594
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！