1.vue3组件外使用route
在写vue3项目时，有时候我们会把组件内部分逻辑代码分离到外部js中，然后在组件里通过import导入。此时如果我们要在组件外使用route对象，方式与组件内不同：
- 组件内：
import { useRoute } from 'vue-router';
const route = useRoute();
- 组件外js文件中
// '@/router'为router配置文件，里面已导出router
import router from '@/router';
const route = router.currentRoute;
// 使用route，route为一个ref响应式对象，使用时需要加上'.value'
const query = route.value.query;
2.组件外使用route时其值为空或上一个路由route值，不是当前路由route值
- 案例：
import router from '@/router';
const route = router.currentRoute;
console.log(route.value);
- 解决方案
原因可能是当前路由使用的组件不是异步组件，导致上述代码在路由更新前就已经执行，改为异步组件就好。
router配置文件中：
3.组件外使用route仍然存在的问题
如果我们在组件外使用route.query的值，并在组件内导入，当我们切换到其他路由再切换回来时，即使route里携带的query值变化，但是组件内并没有重新导入数据，还是用的原来的route.query值。
