vue3获取当前路由地址

正解

使用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获取当前路由地址的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue中路由守卫的具体使用

    Vue中路由守卫的具体使用

    目录 1.全局守卫 1.1 全局前置守卫 1.2 全局后置路由守卫 1.3 整合 2. 路由独享的守卫 3.组件内的守卫 作用:对路由进行权限控制 分类:全局守卫.独享守卫.组件内守卫 1.全局守卫 1.1 全局前置守卫 顾名思义,前置守卫主要是在你进行路由跳转之前根据你的状态去 进行一系列操作(全局前置是为在路由初始化以及跳转之前都会触发) 你可以使用router.beforeEach注册一个全局前置守卫(Each:每个,即在任意一个路由跳转的时候都会触发) 每个守卫方法接收三个参数: to:

  • Vue实现路由嵌套的方法实例

    Vue实现路由嵌套的方法实例

    1.嵌套路由又称子路由,在实际应用中,通常由多层嵌套的组件组合而成.(其实就是套娃操作罢了,跟后端的视图跳转路径蛮像的): 2. 创建用户信息组件,在 views/user 目录下创建一个名为 Profile.vue 的视图组件: Profile.vue <template> <h1>咸鱼_翻身1</h1> </template> <script> export default { name: "UserList" } <

  • Vue路由vue-router用法讲解

    Vue路由vue-router用法讲解

    目录 一.vue-router 1.简介 2.使用流程 二.基本路由实现 三.嵌套路由 四.缓存路由组件 1.为什么使用 2.如何使用 3.完整代码 五.传递参数 1.通过url传递(param传递) 2.通过query传递 3.通过param传递 六.$route 与 $router 的区别 1.$route 2.$router 3.跳转路由的三种形式 一.vue-router 1.简介 (1)SPA:Single Page Application(单页应用),简单理解就是只有一个web页面的

  • 一篇文章带你了解vue路由

    一篇文章带你了解vue路由

    目录 概念 Vue Router 简介 Vue Router的特性 Vue Router的使用步骤 分类 嵌套路由 动态路由 命名路由 编程式导航 总结 概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源.那么url地址和真实的资源之间就有一种对应的关系,就是路由. 路由分为前端路由和后端路由 1).后端路由是由服务器端进行实现,并完成资源的分发后端路由性能相对前端路由来说较低,所以,我们接下来主要学习的是前端路由2)

  • Vue router 路由守卫详解

    Vue router 路由守卫详解

    目录 一.全局前置beforeEach 1. 全局前置beforeEach 2. 实现 二.需求二 三.全局后置守卫 afterEach 1. 修改title为自己的title 四.组件内守卫 1. beforeRouteEnter 2. beforeRouteLeave 总结 一.全局前置beforeEach 当 Local Storage 里面存储的 name 是 zhangsan 的时候, 点击消息才显示消息内容 1. 全局前置beforeEach 给router添加一个路由守卫 befo

  • Vue学习-VueRouter路由基础

    Vue学习-VueRouter路由基础

    目录 一.VueRouter 1.说明 2.选中路由的渲染: 3.基本工作原理 二.实战 1.创建一个带router的vue项目 2.打开项目中的src/router/index.js文件 3.在浏览器中打开项目 4.新建路由 一.VueRouter 1.说明 用 Vue.js + Vue Router 创建单页应用,感觉很自然:使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 Vue Router 添加进来,我们需要做的是,将组件 (components) 映射到路由 (

  • vue3获取当前路由地址

    vue3获取当前路由地址

    正解 使用useRouter: // router的 path: "/user/:uid" <template> <div>user</div> <p>uid: {{ uid }}</p> </template> <script lang="ts"> import { defineComponent } from "vue"; import { useRouter

  • Vue2.x与Vue3.x中路由钩子的区别详解

    Vue2.x与Vue3.x中路由钩子的区别详解

    目录 vue2.x 前置概念: 路由钩子分类 路由和组件的概念(方便理解钩子函数) 全局路由钩子 路由配置守卫钩子 组件内的守卫钩子 路由钩子执行顺序 eg: 从A组件跳转到B组件顺序 如果B路有更新, 每次都会执行以下三个钩子: vue3.x 对比变化图 区别补充: vue2.x 前置概念: 路由钩子分类 一共分3类, 7个钩子 路由和组件的概念(方便理解钩子函数) 路由和组件是2个概念, 可以粗犷的认为: 路由是浏览器网址 组件是显示在网页上的不同内容 全局路由钩子 router.befor

  • vue3中router路由以及vuex的store使用解析

    目录 vue3 router路由及vuex store使用 1.路由 2.vuex vue3中router路由和vuex的store使用,获取对象基本使用 vue3中router和store使用方法 1.企业开发Router全局配置 2.企业开发Store全局配置 功能快捷键 vue3 router路由及vuex store使用 1.路由 <script> import { useRouter, useRoute } from 'vue-router' export default {   s

  • java如何实现获取客户端ip地址的示例代码

    java如何实现获取客户端ip地址的示例代码

    目录 一.前言 二.摘要 三.java实现获取客户端ip 一.前言 环境:jdk1.8 + idea2019.3 + Windows10 二.摘要 项目开发中,在日常处理操作日志时,基本都会通过aop切面来实现用户操作日志的记录,但涉及到记录操作日志,想必肯定会有一项是基本都会参考记录的,那就是操作人的客户端ip地址,日后查"脏"也方便. 那么问题来了.具体怎么获取客户端的ip地址啊?哈哈哈,这就是我这期的教学内容,若是有的小伙伴知道怎么获取,那么我要表扬你,但是实现思路是否与我有同异

  • vue3配置router路由并实现页面跳转功能

    目录 1.安装vue-router 2.根目录下新建router文件夹,下面新建index.js文件和routes.js 2.1文件中引入vue方法.配置页面具体路径 3.main.js文件中引入路由 4.APP.vue里声明路由的占位符<router-view></router-view> 5.测试 6.文件代码 1.安装vue-router 用vue3需要安装版本4.0以上的vue-router,安装命令: npm install vue-router@next --save

  • AngularJS 路由和模板实例及路由地址简化方法(必看)

    AngularJS 路由和模板实例及路由地址简化方法(必看)

    最近一同事在学习AngularJS,在路由与模板的学习过程中遇到了一些问题,于是今天给她写了个例子,顺便分享出来给那些正在学习AngularJS的小伙伴们. 话说这AngularJs 开发项目非常的爽,其中爽就爽在它的开发模式,使得代码更加的清晰.更加具有可读性.更简洁.更具有维护性.但是在使用AngularJS开发的过程中也有让我头疼的地方,那就是目前前端框架更多的还是以Jquery为主,很多插件都是依赖于Jquery的,AngulaJS的插件少之又少(除了AngularUI其他的Angula

  • jsp获取客户端IP地址的方法

    本文实例讲述了jsp获取客户端IP地址的方法.分享给大家供大家参考,具体如下: public static String getIpAddr(HttpServletRequest request) { String ip = request.getHeader("X-Forwarded-For"); if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) { ip = request

  • JSP 获取真实IP地址的代码

    但是在通过了 Apache,Squid等反向代理软件就不能获取到客户端的真实IP地址了.如果使用了反向代理软件,用 request.getRemoteAddr()方法获取的IP地址是:127.0.0.1或 192.168.1.110,而并不是客户端的真实IP. 经过代理以后,由于在客户端和服务之间增加了中间层,因此服务器无法直接拿到客户端的 IP,服务器端应用也无法直接通过转发请求的地址返回给客户端.但是在转发请求的HTTP头信息中,增加了X-FORWARDED-FOR信息.用以跟踪原有的客户端

  • iOS获取手机ip地址代码

    本文实例为大家分享了iOS获取手机ip地址的具体代码,供大家参考,具体内容如下 #import <ifaddrs.h> #import <arpa/inet.h> // Get IP Address - (NSString *)getIPAddress { NSString *address = @"error"; struct ifaddrs *interfaces = NULL; struct ifaddrs *temp_addr = NULL; int s

  • python使用Flask框架获取用户IP地址的方法

    本文实例讲述了python使用Flask框架获取用户IP地址的方法.分享给大家供大家参考.具体如下: 下面的代码包含了html页面和python代码,非常详细,如果你正使用Flask,也可以学习一下最基本的Flask使用方法. python代码如下: from flask import Flask, render_template, request # Initialize the Flask application app = Flask(__name__) # Default route,

随机推荐