vue3里定义了ref接受接口数据，但是route接受ref数据时跳转path参数时报错

vue3里定义了ref接受接口数据，但是route接受ref数据时跳转path参数时报错

代码如下：

<script setup>
import { getDetail } from '@/apis/detail'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
//数据
const goods = ref([])
const getGoods = async () =>{
    const res = await getDetail(route.params.id)
    console.log(res);
    goods.value = res.data.result 
}
onMounted(()=>{
    getGoods()
})
</script>

 <el-breadcrumb-item 
 :to="{ path: `/category/${goods.categories[1].id}` }"
 >{{goods.categories[1].name}}
</el-breadcrumb-item>
<el-breadcrumb-item 
:to="{ path: `/category/sub/${goods.categories[0].id}` }"
>{{goods.categories[0].name}}
</el-breadcrumb-item>

  错误原因：goods一开始{}  {}.categories -> undefined  -> undefined[1]
        1. 可选链的语法?. 
       2. v-if手动控制渲染时机 保证只有数据存在才渲染

解决方案1. 可选链的语法?.

 <el-breadcrumb-item :to="{ path: `/category/${goods.categories?.[1].id}` }">{{goods.categories?.[1].name}}
          </el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: `/category/sub/${goods.categories?.[0].id}` }">{{goods.categories?.[0].name}}
          </el-breadcrumb-item>

解决方法2.v-if
使用v-if前提，v-if放最外面的标签里这样，看起来加载进度舒服

<div v-if="goods.details">
<div>
	<el-breadcrumb-item 
	:to="{ path: `/category/${goods.categories[1].id}` }"
	>{{goods.categories[1].name}}
     </el-breadcrumb-item>
      <el-breadcrumb-item 
      :to="{ path: `/category/sub/${goods.categories[0].id}` }"
      >{{goods.categories[0].name}}
       </el-breadcrumb-item>
</div>
</div>