您的位置:首页 > 新闻 > 热点要闻 > 多多OJ评测系统 在前端脚手架Vue-Cli中设置页面路由

多多OJ评测系统 在前端脚手架Vue-Cli中设置页面路由

2025/10/14 0:53:58 来源:https://blog.csdn.net/qq_30500575/article/details/140649503  浏览:    关键词:多多OJ评测系统 在前端脚手架Vue-Cli中设置页面路由

目录

设置页面路由

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

设置成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];
});

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

首先点击菜单项

跳转更新路由

更新路由后

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com