关于Naive UI Menu组件路由跳转无效

原因及结果

这天我正在用NaiveUI的Menu组件，试图进行路由跳转官方的方法是将其渲染成routerLink，如下

const menuOptions = [
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: 'home',
            params: {
              lang: 'zh-CN'
            }
          }
        },
        { default: () => '回家' }
      ),
    key: 'go-back-home'}]

但得到的结果却是一片空白

解决方法

解决方式就是使用NMenu提供的on-update:valueAPI写一个回调函数，然后使用router.push，然后我们的menuOptions就可以写成

const menuOptions = [
  {
    label:"回家"
    key: '/home'}]

这里的key就是要跳转的路径，然后就是回调函数部分

import { useRouter } from "vue-router";
const router =useRouter()
function func(key,item){
    router.push(key)
}

记得要在组件中加上这一行

<n-menu :options="Menuoptions" :on-update:value="func"/>

此处的router对象的创建一定要在函数之外，不然会报错，然后问题就解决了

小声BB

感觉最近写的越来越短了，实在不知道写些什么