脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue获取当前路由

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获取当前路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 前端vue3项目中百度地图的使用api以及操作实例

    前端vue3项目中百度地图的使用api以及操作实例

    最近项目要用到百度地图api,好久没用到地图,就百度了一番,但是找了好几篇文章,发现都没办法成功实现,现将方法记录如下,下面这篇文章主要给大家介绍了关于前端vue3项目中百度地图的使用api以及操作实例,需要的朋友可以参考下
    2023-05-05
  • vue 行为验证码之滑动验证AJ-Captcha使用详解

    vue 行为验证码之滑动验证AJ-Captcha使用详解

    这篇文章主要介绍了vue 行为验证码之滑动验证AJ-Captcha使用详解,AJ-Captcha不需要npm安装，只需要将组件 verifition复制到所使用的components目录下，本文给大家详细讲解，需要的朋友可以参考下
    2023-05-05
  • vue使用recorder.js实现录音功能

    vue使用recorder.js实现录音功能

    这篇文章主要为大家详细介绍了vue使用recorder.js实现录音功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-11-11
  • webpack项目中使用vite加速的兼容模式详解

    webpack项目中使用vite加速的兼容模式详解

    这篇文章主要为大家介绍了webpack项目中使用vite加速的兼容模式示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • 详解vee-validate的使用个人小结

    详解vee-validate的使用个人小结

    本篇文章主要介绍了详解vee-validate的使用个人小结，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-06-06
  • vue中使用v-for时为什么不能用index作为key

    vue中使用v-for时为什么不能用index作为key

    这篇文章主要介绍了vue中使用v-for时为什么不能用index作为key，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • vue props数据传递类型限制方式

    vue props数据传递类型限制方式

    这篇文章主要介绍了vue props数据传递类型限制方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • vue 文件目录结构详解

    vue 文件目录结构详解

    本篇文章主要介绍了vue 文件目录结构详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue3 组合式API defineEmits() 与 emits 组件选项详解

    vue3 组合式API defineEmits() 与 emits 组

    在Vue中,defineEmits()是Vue3组合式API中用于声明自定义事件的,而emits选项则用于Vue2和Vue3的选项式API中,defineEmits()允许使用字符串数组或对象形式声明事件,emits选项也支持这两种形式,且验证函数可以验证事件参数,这两种方法都是为了更规范地在组件间通信
    2024-09-09
  • vue-router懒加载速度缓慢问题及解决方法

    vue-router懒加载速度缓慢问题及解决方法

    这篇文章主要介绍了vue-router懒加载速度缓慢问题及解决方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11

最新评论