老师我有个疑问

来源:4-23 业务落地:依据动态数据,渲染面包屑

qq_Simpleisbeau_0

2022-03-28

在Breadcrumb/index.vue文件

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'

const route = useRoute()
// 生成数组数据
const breadcrumbData = ref([])
const getBreadcrumbData = () => {
  breadcrumbData.value = route.matched.filter(
    (item) => item.meta && item.meta.title
  )
  console.log(breadcrumbData.value)
}
// 监听路由变化时触发
watch(
  route,
  () => {
    getBreadcrumbData()
  },
  {
    immediate: true
  }
)

// 处理点击事件
const router = useRouter()
const onLinkClick = (item) => {
  router.push(item.path)
}

// 将来需要进行主题替换,所以这里获取下动态样式
const store = useStore()
const linkHoverColor = ref(store.getters.cssVar.menuBg)
</script>

图片描述
在这段代码,我忘记在【import { useStore } from ‘vuex’ 】 引入 useRouter了,然后浏览器控制台报错报是【linkHoverColor】不相关的错误,搞的我一直捣鼓【linkHoverColor】,都不知道为啥出错,不断debugger,最后才发现,是少引入了useRouter。

疑问:
为什么会出现报这种不相关的错误,而不直接报useRouter的相关错误,如果出现报这种不相关错误一般怎么调试比较好,老师你会怎么解决,请回答一下,谢谢

写回答

1回答

Sunday

2022-03-29

你好

这个报错是 vue 内部的错误处理系统提供的,你可以理解为这个错误提示的不清晰,与开发其实并无关系。像这种无关的错误,谁看到都会蒙的。

0
0

基于Vue3新标准,打造后台综合解决方案

基于Vue3重写Vue-element-admin,打造后台前端综合解决方案

1941 学习 · 1687 问题

查看课程