vue获取当前路由的五种方式示例代码

 更新时间:2023年08月29日 08:29:22   作者:一沓纸稿  
这篇文章主要给大家介绍了关于vue获取当前路由的五种方式,文中通过代码示例介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下

第一种

import { defineComponent,ref} from 'vue';
import { useRouter } from 'vue-router';
const router=useRouter
//通过实例化useRouter的router对象中,含有多个属性,其中就包含了当前路由地址,
console.log('router',router.currentRoute.value.fullPath);

第二种

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

通过getCurrentInstance 获取当前的组件实例,从而通过其获取router,然后胡德当前路由地址

第三种

import {  toRaw} from 'vue';
import { useRouter } from 'vue-router';
let router = useRouter()
console.log(toRaw(router).currentRoute.value.fullPath);
通过toRaw返回其原始对象,即将实例化的router转化为useRouter

第四种

import { watch } from 'vue';
import { useRouter } from 'vue-router';
   let router = useRouter()
   watch(router,(newValue, oldValue) => {
        console.log(newValue.currentRoute.value.fullPath);},
      { immediate: true }
    );
 //这一种写法比较麻烦,但是逻辑比较简单,通过监听获取最新的router对象,进而获取路由地址,而且在第一次的时候,就要执行监听,

第五种

import {  ref } from 'vue';
import { useRoute } from 'vue-router';
let path=ref("")
const route=useRoute()
path.value=route.path
//这一种最为简单,推荐这种

总结 

到此这篇关于vue获取当前路由的五种方式的文章就介绍到这了,更多相关vue获取当前路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 使用vue制作FullPage页面滚动效果

    使用vue制作FullPage页面滚动效果

    本篇文章主要介绍了使用vue制作FullPage页面滚动效果,详细的介绍了FullPage页面的思路和实现,有兴趣的可以了解一下
    2017-08-08
  • VUE中的v-if与v-show区别介绍

    VUE中的v-if与v-show区别介绍

    这篇文章介绍了VUE中v-if与v-show的区别,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-03-03
  • vue3声明字段名为枚举的类型详解

    vue3声明字段名为枚举的类型详解

    这篇文章主要介绍了vue3声明字段名为枚举的类型方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 解决vue同一slot在组件中渲染多次的问题

    解决vue同一slot在组件中渲染多次的问题

    今天小编就为大家分享一篇解决vue同一slot在组件中渲染多次的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 解决vue2.0动态绑定图片src属性值初始化时报错的问题

    解决vue2.0动态绑定图片src属性值初始化时报错的问题

    下面小编就为大家分享一篇解决vue2.0动态绑定图片src属性值初始化时报错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue普通加密及国密SM2、SM3和sm4的使用例子

    vue普通加密及国密SM2、SM3和sm4的使用例子

    在我的项目中,甲方要求系统登录时对密码进行加密后再传给后端,指定使用国密SM3,下面这篇文章主要给大家介绍了关于vue普通加密及国密SM2、SM3和sm4使用的相关资料,需要的朋友可以参考下
    2022-12-12
  • vue3中$refs的基本使用方法

    vue3中$refs的基本使用方法

    在Vue中一般很少会用到直接操作DOM,但不可避免有时候需要用到,这时我们可以通过ref和$refs这两个来实现,下面这篇文章主要给大家介绍了关于vue3中$refs的基本使用方法,需要的朋友可以参考下
    2022-03-03
  • Vue如何使用ElementUI对表单元素进行自定义校验及踩坑

    Vue如何使用ElementUI对表单元素进行自定义校验及踩坑

    有一些验证不是通过input select这样的受控组件来触发验证条件的 ,可以通过自定义验证的方法来触发,下面这篇文章主要给大家介绍了关于Vue如何使用ElementUI对表单元素进行自定义校验及踩坑的相关资料,需要的朋友可以参考下
    2023-02-02
  • Vue.js仿微信聊天窗口展示组件功能

    Vue.js仿微信聊天窗口展示组件功能

    这篇文章主要介绍了Vue.js仿微信聊天窗口展示组件功能,需要的朋友可以参考下
    2017-08-08
  • VUE递归树形实现多级列表

    VUE递归树形实现多级列表

    这篇文章主要为大家详细介绍了VUE递归树形实现多级列表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07

最新评论