最近在使用 Vue3 + AntD Vue
开发项目,因为也是刚刚在学习,会遇到一些简单的问题。
问题描述
路由文件写好,加载菜单数据后,点击菜单跳转到对应的路由,这里使用的是:
const router = useRouter()
router.push({
path: '/' }) // 跳转到首页
但是,问题出现了,当刷新页面时,浏览器地址栏的路由地址显示正常,但是选择的菜单已不是路由所对应的菜单了。
解决方案
先上代码:
<!-- 菜单模板 -->
<a-menu
v-model:selectedKeys="current"
mode="horizontal"
@click="menuClick"
>
<template v-for="item in menuList" :key="item.key">
<template v-if="!item.children">
<a-menu-item :key="item.key">
{
{ item.title }}
</a-menu-item>
</template>
<template v-else>
<a-sub-menu :key="item.key" :menu-info="item" />
</template>
</template>
</a-menu>
const route = useRoute()
const current = [route.path]
// 菜单数据
const menuList = [
{
key: '/',
title: '首页'
},
{
key: '/news',
title: '新闻动态'
},
]
路由代码:
const routes = [
{
path: '/',
name: 'Home',
component: () => import('@/views/Home.vue')
},
{
path: '/news',
name: 'News',
component: () => import('@/views/News.vue')
},
]
以上就是最基本的代码,如果有二级等子菜单,模板中 a-menu
还需要加一个属性 openKeys
,表示当前展开的 SubMenu
菜单项 key
数组。
为了菜单与路由一一对应,即需要保证菜单的 key
与路由的 path
保持一致。