目录
设置页面路由
我们把菜单上的路由改成读取路由文件
实现更通用的动态配置
其实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];
});这样就能实现 在哪个页面刷新 还会停留在哪个页面
首先点击菜单项
跳转更新路由
更新路由后
同步去更新菜单栏的高亮状态