vue获取当前页面地址

VIP文章 已于 2023-03-27 19:46:43 修改
阅读量1.6w 收藏 34
点赞数 7
分类专栏： vue 文章标签： vue.js 前端
于 2022-09-21 17:01:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58414196/article/details/126976492
版权

1、vue获取当前页面完整地址：window.location.href

2、获取前面固定地址：window.location.host

关于window.location的详解：

　　window.location 对象不仅可以获得当前页面的地址 (URL)，还能够将浏览器重定向到新的页面。

　　下面，以http://www.xxxxxx.com:8000/test?id=123&username=xxx为例来进行解释：

　　1. window.location.href （当前url）—— http://www.xxxxxx.com:8000/test?id=123&username=xxx

　　2. window.location.protocol（协议）—— http:

　　3. window.location.host（域名 + 端口）—— www.xxxxxx.com:8000

　　4. window.location.hostname（域名）—— www.xxxxxx.com

　　5. window.location.port（端口）—— 8000

　　6. window.location.pathname（路径）—— /test

　　7. window.location.search （请求的参数）—— ?id=123&username=xxx

　　8. window.location.origin（路径前面的url）——  http://www.xxxxxx.com:8000

keepRuning9
关注
  • 7
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue 获取当前页面URL和进行页面重定向
一碗清深的博客
03-28 386
在Vue开发中，有时候我们需要获取当前页面的URL或者进行页面重定向。本文将介绍如何使用window.location对象来获取当前页面的URL以及常用的重定向方法。
Vue-location_Select
05-16
Vue组件-极简的地址选择器 使用Demo前先把mock服务跑一下，因为模拟了后台传输数据。地址信息存放在/mock/site.json中。 当然你需要自己结合自己后台提供的的地址信息作出一些修改 功能极简，需要新功能可自行添加。依赖方面只有Vue Demo图
vue怎么获取当前的路径,参数等信息
热门推荐
miracle
07-17 6万+
例子: 有一个路径:http://school/#/business/syllabus/50779 this.$route.params.id 可以获取路由最后参数 50779 this.$route.params.path 可以获取到根路径下的整个路径 business/syllabus/50779 this.$route还有一些其他的参数,具体可以自己动手 console.log(thi...
【vue3】获取当前页面路由的四种方法
坚信万物皆可切的切图仔
12-24 3万+
有三种方法 第一种 import { defineComponent, ref, getCurrentInstance } from 'vue'; const { proxy }: any = getCurrentInstance(); console.log(proxy.$router.currentRoute.value); 第二种 import { defineComponent, ref, toRaw} from 'vue'; import { useRouter } from 'vue
最详细的js获取当前url的方法
你若为我繁华，我愿成你烟花
11-14 1522
1、window.location.href(设置或获取整个 URL 为字符串) var test = window.location.href; alert(test); 返回：http://i.cnblogs.com/EditPosts.aspx?opt=1 2、window.location.protocol(设置或获取 URL 的协议部分) var test = window.loc...
如何获取vue单文件自身源码路径
10-17
主要介绍了如何获取vue单文件自身源码路径，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
js打开新的窗口window_前端必备基础知识：window.location 详解
weixin_39709262的博客
11-25 1471
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：KaysonLi 的个人主页 - 专栏 - 掘金前端开发人员对 window.location对象应该不陌生，通过它不但可以获取当前页面的地址信息，还可以修改某些属性，实现页面跳转和刷新等。我们以一个常见的 URL 为例，看看window.location包含哪些属性和方法。window.location....
19. Vue获取当前位置
从器之道 从一而终
06-02 1678
然后通过经纬度获取具体地址或者其他信息获取可以通过第三方接口。
vue获取当前页面的url路径
qq_43405603的博客
11-22 7776
完整url可以用 window.location.href 路由路径可以用 this.$route.path 路由路径参数 this.$route.params 例如：/user/:id → /user/2044011030 → this.$route.params.id 路由查询参数 this.$route.query 例如：/user/search?name=sf → this.$route.query.name 原文链接：https://blog.csdn.net/a350110085/articl.
vue\js等获取当前页面的url网址（超全）
最新发布
weixin_43312391的博客
07-19 3866
我们在开发中经常会遇到获取当前网址的url、协议、域名、端口、路径、参数等情况，以下总结了几种常见的获取当前url的几种情形。
vue如何获取当前页面的url
zhouhouyong_web的博客
01-11 1629
vue如何获取当前页面的url
在Vue中获取组件声明时的name属性方法
10-18
今天小编就为大家分享一篇在Vue中获取组件声明时的name属性方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
test-electron-vue用来获取电脑mac地址
04-20
下载资源后请注意输入cnpm i 获取依赖 ，然后在项目根目录下执行cnpm run electron:serve即可。注意：需要环境vuecli3+，cnpm , npm , node
获取浏览器当前页面地址栏的URL
11-02
本程序是用VC实现的一个获取浏览器的URL的小项目，是从一个大项目抽取出来的一小部分，相信有同路人会用得上的。
Vue CLI3搭建的项目中路径相关问题的解决
12-12
这是开头 最近在试水 Vue CLI 3，并且尝试配置一个多页面（多应用）项目出来，期间又遇到各种路径问题，于是…于是有了下面的唠叨。 以下都是基于 Vue CLI 3 来举例说明的，使用 2.x 版本的其实也类似 首先，参考 官方文档对静态资源处理的说明，并通过自己的实践，可以总结出以下内容 静态资源可以通过两种方式进行处理: 1、以下情况下，资源不会被 webpack 处理，而是被直接拷贝： 放置在 public 目录下，即使未被使用。 通过绝对路径被引用，即以 / 开头的路径。 2、以下情况下，资源会被 webpack 处理（URL的resolve、minify、uglif
vue3 获取焦点，vu3 input 获取焦点 Vue 3 focus input
09-08
我们都知道在vue2中获取焦点为,然后调用focus方法 this.$nextTick(()=>{ this.$refs.XXX.focus() }) 现在我们的vue3怎么获取焦点，请看附件，已经正常使用。 请放心下载
vue离开当前页面触发的函数代码
11-19
补充知识：vue中进入路由页面和离开路由页面后执行函数 进入路由页面 mounted(){ this.$nextTick(()=>{ show(); }) } 离开路由页面后执行函数 destroyed: function () { console.log("我已经离开了！"); ...
vue获取当前IP所在地天气.docx
11-23
原生的vue源代码，使用vue获取当前IP，并且获取到当前所在地天气.docx，亲测有效，有问题可一直私聊我
使用vue-router切换页面时，获取上一页url以及当前页面url的方法
10-17
主要介绍了使用vue-router切换页面时，获取上一页url以及当前页面url的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue获取当前页面路由
05-13
在Vue中，可以通过 `$route` 对象获取当前页面的路由信息。可以在组件中使用 `$route` 对象来获取当前页面的路由信息，如下所示： ```javascript <template> <div> <p>当前路由名称： {{$route.name}}</p> <p>当前路由路径： {{$route.path}}</p> <p>当前路由参数： {{$route.params}}</p> </div> </template> <script> export default { name: "MyComponent", mounted() { console.log(this.$route); }, }; </script> ``` 在`mounted`钩子函数中，可以通过`this.$route`获取当前页面的路由信息。 另外，如果需要在代码中获取当前页面的路由信息，可以使用`this.$route`，例如： ```javascript export default { name: "MyComponent", methods: { getCurrentRoute() { console.log(this.$route); // 打印当前路由信息 }, }, }; ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值