【vue3】获取当前页面路由的四种方法

有三种方法第一种import { defineComponent, ref, getCurrentInstance } from 'vue';const { proxy }: any = getCurrentInstance();console.log(proxy.$router.currentRoute.value);第二种import { defineComponent, ref, toRaw

前端阿彬

39366人浏览 · 2021-12-24 16:19:27

前端阿彬 · 2021-12-24 16:19:27 发布

获取路由有四种方法，获取到的path和fullpath的区别是fullpath会携带参数，所以要根据业务需求获取不同的数据项。

第一种

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

const router = useRouter()
console.log('router',router.currentRoute.value.fullpath);

第二种

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

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

第三种

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

let router = useRouter()
console.log(toRaw(router).currentRoute.value.fullPath);

第四种

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 将立即以表达式的当前值触发回调：