您的位置：首页 > 编程技术 > js  >  vue3获取当前路由地址

vue3获取当前路由地址

 更新时间：2022年1月5日 12:09  点击：700 作者：忞翛

正解

使用useRouter:

// router的 path: "/user/:uid"
<template>
  <div>user</div>
  <p>uid: {{ uid }}</p>
</template>
 
<script lang="ts">
import { defineComponent } from "vue";
import { useRouter } from "vue-router";
 
export default defineComponent({
  name: "User",
  setup() {
    const router = useRouter();
    const uid = router.currentRoute.value.params.uid;
    return {
      // 返回的数据
      uid,
    };
  },
});
</script>

解释一下

useRouter()返回的是object, 类似于vue2的this.$router

而router.currentRoute是RefImpl对象, 即我们使用ref返回的对象, 通过.value可以访问到当前的路由, 类似于vue的this.$route

使用console.log打印出来看看:

 到此这篇关于vue3获取当前路由地址的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持猪先飞。

原文出处：https://www.cnblogs.com/lczmx/p/15709172.html

[!--infotagslink--]

相关文章

  • PHP成员变量获取对比(类成员变量)

    下面本文章来给大家介绍在php中成员变量的一些对比了，文章举了四个例子在这例子中分别对不同成员变量进行测试与获取操作，下面一起来看看。 有如下4个代码示例，你认...2016-11-25

  • php 获取用户IP与IE信息程序

    php 获取用户IP与IE信息程序 function onlineip() { global $_SERVER; if(getenv('HTTP_CLIENT_IP')) { $onlineip = getenv('HTTP_CLIENT_IP');...2016-11-25

  • php获取一个文件夹的mtime的程序

    php获取一个文件夹的mtime的程序了，这个就是时间问题了，对于这个问题我们来看小编整理的几个例子，具体的操作例子如下所示。 php很容易获取到一个文件夹的mtime，可以...2016-11-25

  • vue 实现动态路由的方法

    这篇文章主要介绍了vue 实现动态路由的方法，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-06

  • 如何获取网站icon有哪些可行的方法

    获取网站icon，常用最简单的方法就是通过website/favicon.ico来获取，不过由于很多网站都是在页面里面设置favicon，所以此方法很多情况都不可用。 更好的办法是通过google提供的服务来实现：http://www.google.com/s2/favi...2014-06-07

  • jquery如何获取元素的滚动条高度等实现代码

    主要功能：获取浏览器显示区域（可视区域）的高度 ： $(window).height(); 获取浏览器显示区域（可视区域）的宽度 ：$(window).width(); 获取页面的文档高度 $(document).height(); 获取页面的文档宽度 ：$(document).width();...2015-10-21

  • jquery获取div距离窗口和父级dv的距离示例

    jquery中jquery.offset().top / left用于获取div距离窗口的距离，jquery.position().top / left 用于获取距离父级div的距离（必须是绝对定位的div）。 （1）先介绍jquery.offset().top / left css： 复制代码 代码如下: *{ mar...2013-10-13

  • Jquery 获取指定标签的对象及属性的设置与移除

    1、先讲讲JQuery的概念，JQuery首先是由一个 America 的叫什么 John Resig的人创建的，后来又很多的JS高手也加入了这个团队。其实 JQuery是一个JavaScript的类库，这个类库集合了很多功能方法，利用类库你可以用简单的一些代...2014-05-31

  • 浅谈vue2的$refs在vue3组合式API中的替代方法

    这篇文章主要介绍了浅谈vue2的$refs在vue3组合式API中的替代方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-18

  • C#获取字符串后几位数的方法

    这篇文章主要介绍了C#获取字符串后几位数的方法,实例分析了C#操作字符串的技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25

  • jquery获取tagName再进行判断

    如果是为了取到tagName后再进行判断，那直接用下面的代码会更方便： $(element).is('input') 如果是要取到标签用作到别的地方，可以使用一下代码： $(element)[0].tagName 或： $(element).get(0).tagName...2014-05-31

  • 解决vue动态路由异步加载import组件,加载不到module的问题

    这篇文章主要介绍了解决vue动态路由异步加载import组件,加载不到module的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27

  • DOM XPATH获取img src值的query

    复制代码 代码如下:$nodes = @$xpath->query("//*[@id='main_pr']/img/@src");$prurl = $nodes->item(0)->nodeValue;...2013-10-04

  • PHP 如何获取二维数组中某个key的集合

    本文为代码分享，也是在工作中看到一些“大牛”的代码，做做分享。 具体是这样的，如下一个二维数组，是从库中读取出来的。 代码清单： 复制代码 代码如下: $user = array( 0 => array( 'id' => 1, 'name' => '张三', 'ema...2014-06-07

  • php获取汉字拼音首字母的方法

    现实中我们经常看到这样的说明，排名不分先后，按姓名首字母进行排序。这是中国人大多数使用的排序方法。那么在php程序中该如何操作呢？下面就分享一下在php程序中获取汉字拼音的首字母的方法，在网上搜到的大多数是有问题的...2015-10-23

  • 使用C#获取系统特殊文件夹路径的解决方法

    本篇文章是对使用C#获取系统特殊文件夹路径的解决方法进行了详细的分析介绍，需要的朋友参考下...2020-06-25

  • Vue3 编译流程-源码解析

    今天将从 Vue 的入口文件开始，看看声明了一个 Vue 的单文件之后是如何被 compile-core 编译核心模块编译成渲染函数的。下面小编讲解并附上代码分析展现在文章里，感兴趣的小伙伴不要错过奥...2021-09-25

  • php如何获取文件的扩展名

    网上也有很多类似的方法，不过都存在这样那样的不严谨的问题，本文就不一一分析了，这里只给出最正确的利用php 获取文件扩展名（文件后缀名）的方法。 function get_extension($filename){ return pathinfo($filename,PATHIN...2015-10-30

  • 解决vue-router路由拦截造成死循环问题

    这篇文章主要介绍了解决vue-router路由拦截造成死循环问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-05

  • vue.js Router中嵌套路由的实用示例

    这篇文章主要给大家介绍了关于vue.js Router中嵌套路由的相关资料,所谓嵌套路由就是路由里面嵌套他的子路由,文章通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-06-27