router-view多级嵌套，导致经常路由更新了 但是页面并没有跳转

终究还是我太菜了， 因为随着项目的变大， 路由的地址也是越来越长

/a/b/c/d

问题我a下面的路由还全都是懒加载的，我都严重怀疑 当我访问的时候 我的路由并没有加载出来，
我也不知道为什么原因 所以我把路由的懒加载去掉之后 恢复正常了（后面又出现了问题，但下面的是更新过的 ）

1. 直接再路由文件提前外层嵌套的路由 提前先引进来了
   举个例子吧
   a:[children: [], c, d: [children]]
   我们a组件 和 d组件 最好提前引入进来 但是c组件 以及d内部的children组件可以 使用懒加载进行引入

import a from "@/views/a.vue"

2. 使用key强制跳转哈，因为vue发现是相同的组件 很容易就那个啥 没有过渡效果了 但这玩意究竟有没有用处 我还有待怀疑

<router-view v-slot="{ Component, route }">
  <transition name="fade">
    <component :is="Component" :key="route.path" />
  </transition>
</router-view>

还有一种就是那个给父组件加key的方式
比如我的组件是这样的

main.vue

<header></header>
<router-view></router-view>

content.vue

<section :key="key">
	<aside> </aside>
	<router-view></router-view>
</section>


<script lang="ts" setup>
import { useRoute } from "vue-router"
import { computed } from "vue"
const route = useRoute()
const key = computed(() => route.path + Math.random())
</script>

section.vue

<section >
	<router-view></router-view>
</section>

假设上面三层关系是 main包含content content包含section
所以有两层嵌套关系了
当我们往section 页面跳转 有可能出现路由变化 但是页面没有变化的可能
我在组件上加了个key

// 如果你看到最后了 恭喜你 可能获得另一种方式

就是我的通过外部引入使用的路由文件 经常会这样
src/router.js

const router = CreateRouter()

export default router

然后我就在各种axios 请求文件或者封装的公共的跳转文件 都是引入的这个文件导出的router
进行跳转

但是经常偶现那种跳转不过去的可能

建议你查询下 你这个页面中是否重复引入了 import router from “@/router”

我在顶层属性 globalProperties 也就是在自己缝状mixin文件中引入了一次

app.config.globalProperties = {
    ...mixins as any
}

然后再自己封装工具库 common.js中也引入了一次 就经常会这样了

但是在自己的组件中直接使用 useRouer 就会又回复正常了 建议不知道回事的 还是最好在组件中使用 useRouter 这样hook进行跳转吧

关注我 持续更新前端知识