【vue3】獲取當前頁面路由

有三種方法

1. 第一種

import {
     defineComponent, ref, getCurrentInstance } from 'vue';

const {
     proxy }: any = getCurrentInstance();
console.log(proxy.$router.currentRoute.value);

 

2. 第二種

import {
     defineComponent, ref, toRaw} from 'vue';
import {
     useRouter } from 'vue-router';

let router = useRouter()
console.log(toRaw(router));

 

3. 第三種

import {
     defineComponent, ref, watch } from 'vue';
import {
     useRouter } from 'vue-router';

   let router = useRouter()
   watch(
      () => router,
      (newValue, oldValue) => {
    
        console.log(newValue.currentRoute['_value'].fullPath);
      },
      {
     immediate: true }
    );

 //在選項參數中指定 immediate: true 將立即以表達式的當前值觸發回調：

模板中直接使用

詳細參考

Vue3.0學習 - 第十七節，vue3中如何使用 router、 watch、computed、和路由監聽 - 代碼先鋒網 (codeleading.com)