在setup中获取$route，$router的三种方式

摘抄自：

方法一：在当前.vue中引入vue-router的useRoute, useRouter

import { useRoute, useRouter } from 'vue-router'

setup() {
  let $route=useRoute()
  let $router = useRouter()
  console.log($route.query, $router);
}

方法二：通过const { proxy } = getCurrentInstance()获取当前实例

特别注意：
1. 在ts下会报错报错：...类型“ComponentInternalInstance | null”，两种解决方法：
  1.1. 在前面添加 // @ts-ignore 忽视
  1.2. 报错原因是因为getCurrentInstance()可能是ComponentInternalInstance或者null类型，那么我们给它断言，说它就是ComponentInternalInstance。
        let { proxy } = getCurrentInstance() as ComponentInternalInstance   或者通过 obj?.attr 的形式（如果没有该属性就算了）
        let { proxy } = getCurrentInstance()
        console.log(proxy?.$router)
    
2. const { ctx } = getCurrentInstance()是错误用法，这里ctx打包后在生产环境下是获取不到的
setup() {
  // @ts-ignore
  let { proxy } = getCurrentInstance()
  console.log(proxy.$route.query);
}

方法三：考虑到在获取上下文和全局挂载实例的时候会用到这个getCurrentInstance，那我们来新建 hooks\useCurrentInstance.ts（在方法二上的拓展）

useCurrentInstance.ts
import { ComponentInternalInstance, getCurrentInstance } from 'vue'
export default function useCurrentInstance() {
    const { appContext } = getCurrentInstance() as ComponentInternalInstance
    const globalProperties = appContext.config.globalProperties  //这是在访问全局变量，全局变量里包含路由$route, $router
    return {
        globalProperties
    }
}

xxx.vue
// 先引入文件
import useCurrentInstance from "@/hooks/useCurrentInstance";
...
// 在setup 中使用处理
setup() {
  const { globalProperties } = useCurrentInstance()
  console.log(globalProperties.$route.query);
}