原因及结果

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


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

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

解决方法

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

1
2
3
4


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

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

1
2
3
4
5


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

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

1

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

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

小声BB

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