vue3组件外使用route

1.vue3组件外使用route

在写vue3项目时，有时候我们会把组件内部分逻辑代码分离到外部js中，然后在组件里通过import导入。此时如果我们要在组件外使用route对象，方式与组件内不同：

• 组件内：

import { useRoute } from 'vue-router';
const route = useRoute();
1
2

• 组件外js文件中

// '@/router'为router配置文件，里面已导出router
import router from '@/router';
const route = router.currentRoute; 

// 使用route，route为一个ref响应式对象，使用时需要加上'.value'
const query = route.value.query;
1
2
3
4
5
6

2.组件外使用route时其值为空或上一个路由route值，不是当前路由route值

• 案例：

import router from '@/router';
const route = router.currentRoute; 
console.log(route.value);
1
2
3

• 解决方案
  原因可能是当前路由使用的组件不是异步组件，导致上述代码在路由更新前就已经执行，改为异步组件就好。
  router配置文件中：
  
  

3.组件外使用route仍然存在的问题

如果我们在组件外使用route.query的值，并在组件内导入，当我们切换到其他路由再切换回来时，即使route里携带的query值变化，但是组件内并没有重新导入数据，还是用的原来的route.query值。