脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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获取当前路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue.js划分组件的方法

    Vue.js划分组件的方法

    这篇文章主要介绍了Vue.js划分组件的方法,需要的朋友可以参考下
    2017-10-10
  • 又一款MVVM组件 Vue基础语法和常用指令（1）

    又一款MVVM组件 Vue基础语法和常用指令（1）

    这篇文章主要为大家分享了一款MVVM组件，详细介绍了Vue基础语法和常用指令,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-11-11
  • vue3+ts项目中.env配置环境变量与情景配置方式

    vue3+ts项目中.env配置环境变量与情景配置方式

    本文介绍了如何在Vite中配置环境变量和不同的运行模式,环境变量文件以.env开头,仅VITE_前缀的变量会被暴露,开发模式加载.env.development,生产模式加载.env.production,NODE_ENV用于区分开发和生产环境
    2024-10-10
  • 利用Vite搭建Vue3+ElementUI-Plus项目的全过程

    利用Vite搭建Vue3+ElementUI-Plus项目的全过程

    vue3如今已经成为默认版本了,相信大多数公司已经全面拥抱vue3了,下面这篇文章主要给大家介绍了关于利用Vite搭建Vue3+ElementUI-Plus项目的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • vue3如何使用postcss-px-to-viewport适配屏幕

    vue3如何使用postcss-px-to-viewport适配屏幕

    这篇文章主要介绍了vue3如何使用postcss-px-to-viewport适配屏幕问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-03-03
  • vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserver实例详解

    vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserve

    这篇文章主要介绍了vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserver实例详解,本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2023-03-03
  • Vue.js中前端如何处理从后端返回的Excel文件流详解

    Vue.js中前端如何处理从后端返回的Excel文件流详解

    这篇文章主要介绍了如何在Vue项目中使用axios处理后端返回的Excel文件流,并提供下载功能,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2025-01-01
  • Vue2.0 实现移动端图片上传功能

    Vue2.0 实现移动端图片上传功能

    本文主要介绍VUE2.0图片上传功能的实现。原理是通过js控制和input标签的方式完成这一效果，无需加载其他组件。具体实例大家大家参考下本文
    2018-05-05
  • UniApp中实现类似锚点定位滚动效果

    UniApp中实现类似锚点定位滚动效果

    一个uniapp小程序的项目,我们需要实现一个非常实用的功能——类似于锚点定位的交互效果,即在首页中有多个tab（分类标签）,每个tab对应着不同的模块,当用户点击某个分类的tab时,需要流畅地滚动到对应的内容位置,提供更好的用户体验,
    2023-10-10
  • uni-popup手写菜鸟上门取件时间选择器

    uni-popup手写菜鸟上门取件时间选择器

    这篇文章主要为大家介绍了uni-popup手撸了一个菜鸟上门取件时间选择器，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08

最新评论