vue3中routerPush失效

发表于 | 分类于 | 评论数： | 阅读次数：

记录在开发过程中遇到的一个坑:在开发环境中正常,但是在生产环境中,使用router.push()方法跳转路由以后页面会卡死.

依赖

1
2
3
4
5
6
7
8
"dependencies": {
   "ant-design-vue": "2.1.6",
   "axios": "^0.21.1",
   "core-js": "^3.6.5",
   "uuid": "^8.3.2",
   "vue": "^3.0.0",
   "vue-router": "^4.0.0-0"
 },

代码

1
2
3
4
5
6
7
8
9
10
11
\\\...
import { useRoute, useRouter } from "vue-router";
\\\
const route = useRoute()


 watch(
      route,
      () => {
        selectedKeys.value[0] = route.path;
      }

问题就出在监听 route上,因为route的体积可能很大,而且watch 在 vue3中默认为深度监听,所以会导致进行路由跳转时,监听route卡死,

https://github.com/vuejs/vue-next/issues/2027

正确写法

1
2
3
4
5
watch(
      ()=>route.path,
      () => {
        selectedKeys.value[0] = route.path;
      }

``

thank u !