您现在的位置是:网站首页> 编程资料编程资料
vue3获取当前路由地址的两种方法_vue.js_
2023-05-24
568人已围观
简介 vue3获取当前路由地址的两种方法_vue.js_
方法一:
// router的 path: "/user/:uid"useruid: {{ uid }}
useRouter()
返回的是object
, 类似于vue2的this.$router
而router.currentRoute
是RefImpl
对象, 即我们使用ref
返回的对象, 通过.value
可以访问到当前的路由, 类似于vue的this.$route
使用console.log
打印出来看看
方式二:window.location 可以直接获取当前窗口的路径
1.window.location.href(当前URL)
结果:http://www.myurl.com:8866/test?id=123&username=xxx
2.window.location.protocol(协议)
结果:http
3.window.location.host(域名 + 端口)
结果:www.myurl.com:8866
4.window.location.hostname(域名)
结果:www.myurl.com
5.window.location.port(端口)
结果:8866
6.window.location.pathname(路径部分)
结果:/test
7.window.location.search(请求的参数)
结果:?id=123&username=xxx
setup(){ const router = useRouter(); onMounted(() => { console.log("router",router.currentRoute.value) if(window.location.pathname=="/askQuestions"){ // if(router.currentRoute.value.path=="/askQuestions"){ console.log("消失;;;;;;") document.getElementById("navSearch").style.display="none" } }); }
总结
到此这篇关于vue3获取当前路由地址的文章就介绍到这了,更多相关vue3获取当前路由地址内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
相关内容
- 前端token中4个存储位置的优缺点说明_vue.js_
- Vue3中Pinia的基本使用笔记_vue.js_
- 详解如何在 JavaScript 中使用三元运算符_javascript技巧_
- 如何在vite里获取env环境变量浅析_vue.js_
- vue 首页加载,速度优化及解决首页白屏的问题_vue.js_
- Object.keys 诡异特性示例详解_javascript技巧_
- Vue中Vue.extend()的使用及解析_vue.js_
- jQuery validate(submitHandler函数)验证通过发送Ajax(实例详解)_jquery_
- OpenLayer基于vue的封装使用教程_vue.js_
- Vue3根据动态字段绑定v-model的操作代码_vue.js_