router

2023-06-05 00:50| 来源: 网络整理| 查看: 265

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

/a/b/c/d

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

直接再路由文件提前外层嵌套的路由提前先引进来了举个例子吧 a:[children: [], c, d: [children]] 我们a组件和 d组件最好提前引入进来但是c组件以及d内部的children组件可以使用懒加载进行引入 import a from "@/views/a.vue" 使用key强制跳转哈，因为vue发现是相同的组件很容易就那个啥没有过渡效果了但这玩意究竟有没有用处我还有待怀疑

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

main.vue

content.vue

import { useRoute } from "vue-router" import { computed } from "vue" const route = useRoute() const key = computed(() => route.path + Math.random())

section.vue

假设上面三层关系是 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进行跳转吧

关注我持续更新前端知识

【本文地址】

公司简介

联系我们