封装组件出现样式问题

[sunsboyxu]

如果我在页面这样写没问题，因为多个地方要使用，所以简单的封装下，但是出现样式问题

      
      // 初始化 vue-router
      import { createRouter, createWebHashHistory } from 'vue-router'
      const router = createRouter({
        history: createWebHashHistory(),
        routes: [{
          path: '/',
          redirect: '/home'
        }, {
          name: 'Home',
          path: '/home',
          component: () => import('@/views/home.vue')
        }, {
          name: 'Profile',
          path: '/profile',
          component: () => import('@/views/home.vue')
        }]
      })
      export default router
      
    

下面是简单的封装
// /src/components/XygCode.vue

<script> export default { name: 'XygCode', props: { codeWidth: { type: String, default() { return '800px' } } }, data() { return {} } } </script>

// main.js
import XygCode from './components/XygCode'

app.component('xyg-code', XygCode)

页面使用

import { definedComponent, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
export default definedComponent({
name: 'xxx',
setup (props, context) {
const router = useRouter()
const route = useRoute()
console.log(router)
console.log(route)
router.push({
path: '/xxx/xxx'
})
router.push({
name: 'xxx'
})
}
})

这样看是渲染了，全变成一行了