解决vue3警告`markRaw` or using `shallowRef` instead of `ref`

1. 在看到这个问题的时候，当前正在写的组件内使用的api错误了，然后把api换成了警告中的api发现还是不对，然后又把当前编辑的页面所有东西都注释了还是报警告，所以由此推断不是当前的页面api使用出的问题。

2. 然后找像了外层，外层就是路由，而且是动态路由这个提示就是报给动态路由的错误的

3.解决：再使用动态路由添加component组件的时候不能直接使用引入的Layout组件，需要再Layout外层包裹警告中的

错误的写法

const routes: RouteRecordRaw = {
    path: router.path,
    name: router.name,
    meta: {
        title: router.title,
        hidden: router.hidden
    },
    component: !router.component || router.component === 'Layout' ? Layout : modules[`/src/views/${router.component}.vue`]
}

正确的写法

1. 引入shallowRef

import { shallowRef } from 'vue'

2. 将Layout使用shallowRef包裹

const routes: RouteRecordRaw = {
    path: router.path,
    name: router.name,
    meta: {
        title: router.title,
        elIcon: router.meta.icon,
        hidden: router.hidden
    },
    component: !router.component || router.component === 'Layout' ? shallowRef(Layout) : modules[`/src/views/${router.component}.vue`]
}