路由——獲取$route，$router的三種方式

摘抄自：https://www.cnblogs.com/mica/p/14756503.html

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

<script setup>
import { useRoute, useRouter } from 'vue-router'

let $route=useRoute()
let $router = useRouter()
console.log($route.query, $router);
</script>

方法二：通過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打包后在生產環境下是獲取不到的

<script setup>
// @ts-ignore
let { proxy } = getCurrentInstance()
console.log(proxy.$route.query);
</script>

方法三：考慮到在獲取上下文和全局掛載實例的時候會用到這個getCurrentInstance，那我們來新建 hooks\useCurrentInstance.ts（在方法二上的拓展）

useGlobalProperties.ts
import { ComponentInternalInstance, getCurrentInstance } from 'vue'
export default function useGlobalProperties() {
    const { appContext } = getCurrentInstance() as ComponentInternalInstance
    const globalProperties = appContext.config.globalProperties  //這是在訪問全局變量，全局變量里包含路由$route, $router
    return {
        globalProperties
    }
}

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

route:

router