目录

设置页面路由

我们把菜单上的路由改成读取路由文件

设置成export 导出路由

在刚刚的原始路由 index.ts中导入就行了

在这边引入我们的路由文件

我们之后点击菜单

我们的路由文件是这样的

但是没有跳转

写一下事件

接下来要同步路由到菜单项

自己定义监听函数

这样就能实现 在哪个页面刷新 还会停留在哪个页面

---

设置页面路由

我们把菜单上的路由改成读取路由文件

实现更通用的动态配置

其实vue - cli脚手架自动帮我们生成了一个路由文件

我们先把一部分给提出来

设置成export 导出路由

在刚刚的原始路由 index.ts中导入就行了

提取通用路由文件

是为了喂给菜单项

在这边引入我们的路由文件

细节

我们之后点击菜单

就能跳转到我们对应的路由文件上去

我们把菜单不写成死的

修改一下

   <a-menu-item v-for="item in routes" :key="item.path">{{ item.name }}</a-menu-item>

<script setup lang="ts">
import { routes } from "../router/routes";
</script>

我们的路由文件是这样的

import { RouteRecordRaw } from "vue-router";
import HomeView from "@/views/HomeView.vue";export const routes: Array<RouteRecordRaw> = [{path: "/",name: "home",component: HomeView,},{path: "/about",name: "about",// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () =>import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),},
];

展示

但是没有跳转

接下来我们要去绑定事件

写一下事件

const router = useRouter();const doMenuClick = (key: string) => {router.push({path: key,});
};

接下来要同步路由到菜单项

就是每次刷新的时候 页面把路由信息同步到菜单项上

首先我们把路由不设置成默认的

自己定义监听函数

//默认主页
const selectedKeys = ref(["/"]);//路由跳转时 更新选中的菜单项
router.afterEach((to, from, failture) => {selectedKeys.value = [to.path];
});

这样就能实现 在哪个页面刷新 还会停留在哪个页面

首先点击菜单项

跳转更新路由

更新路由后

同步去更新菜单栏的高亮状态