目录
需求
解决方案
1.原生JS实现：
1.1 采用正则表达式获取地址栏参数(第一种方法)
1.2 传统方法截取实现（第二种方法）
2.Vue框架实现：
2.1 查询参数获取（场景一）
2.2 获取路径参数（场景二）
3.Angular框架实现：
3.1 矩阵URL参数获取（场景一）
3.2 传统获取（场景二）
4.React框架实现：
4.1 使用React Hooks获取
4.2 使用React Router获取
需求
若地址栏URL为：code-nav/article/917?type=12&title=abc，我们要获取到地址栏后面的的type和title参数，如何才能拿到呢？
解决方案
1.原生JS实现：
1.1 采用正则表达式获取地址栏参数(第一种方法)
//获取地址栏参数，key:参数名称
function getUrlParams(key) {
let reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
let r = window.location.search.substr(1)
.match(reg);
if (r != null)
return unescape(r[2]);
return null;
}
let title = getUrlParams("title"); // abc
let type = getUrlParams("type"); // 121.2 传统方法截取实现（第二种方法）
//获取地址栏参数
function getUrlParams() {
let url = window.location.search; //获取url中"?"符后的字串
let paramsObj = new Object();
if (url.indexOf("?") != -1) {
let str = url.substr(1);
str = str.split("&");
for (let i = 0; i < str.length; i++) {
paramsObj[str[i].split("=")[0]] = decodeURI(str[i].split("=")[1]);
}
}
return paramsObj;
}
let type = getUrlParams().type; // 12
let title = getUrlParams().title; // abc2.Vue框架实现：
2.1 查询参数获取（场景一）
我们需要从地址code-nav/article/917?type=12&title=abc上拿到title的value abc。
<script setup>
import {useRouter} from 'vue-router'
const { currentRoute } = useRouter();
const route = currentRoute.value;
onMounted(()=>{
let type=route.query.type
console.log('type', type) // 12
})
</script>2.2 获取路径参数（场景二）
我们需要从地址code-nav/article/917上拿到917这个参数。
首先需要在router/index.js中定义好路由以及路径参数，如下代码：
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/:id',
name: 'home',
component: () => import('../views/home.vue')
},
]
})
export default router接着就可以在home.vue组件中通过路由useRouter得到参数，注意是route.params，如下代码：
<script setup>
import {useRouter} from 'vue-router'
const { currentRoute } = useRouter();
const route = currentRoute.value;
onMounted(()=>{
let id=route.params.id
console.log('id', id) // 917
})
</script>3.Angular框架实现：
3.1 矩阵URL参数获取（场景一）
参数拼接：
constructor(
private router: Router,
) {}
// 拼装 matrix url
// code-nav/article;type=12;title=abc
go() {
this.router.navigate(['/code-nav/article', {
type: 12,
title: 'abc',
}]);
}使用 this.route.params 或 this.route.paramMap 来获取 matrix URL 参数：
constructor(
private route: ActivatedRoute
) { }
ngOnInit() {
// 获取参数， 使用 params
this.route.params.subscribe(params => {
console.log(params['type'],params['title']);
});
// 使用 paramMap
this.route.paramMap.subscribe(data => {
console.log(data['params'].type,data['params'].title);
})
}3.2 传统获取（场景二）
snapshot：route.snapshot 提供了路由参数的初始值。 你可以通过它来直接访问参数，而不用订阅或者添加 Observable 的操作符
queryParams：一个Observable，其中包含一个由当前路由的必要参数和可选参数组成的map对象。用这个map可以获取来自同名参数的单一值或多重值。
queryParamMap：一个Observable，其中包含一个对所有路由都有效的查询参数组成的map对象。用这个map可以获取来自查询参数的单一或多重值。
constructor(
private route: ActivatedRoute
) { }
ngOnInit() {
// snapshot获取
let param1 = this.route.snapshot.queryParams["title"];
let param2 = this.route.snapshot.queryParams["type"];
console.log(param1);
console.log(param2);
// queryParams获取
this.route.queryParams.subscribe(params => {
console.log(params['title'],params['name']);
});
// 使用 queryParamMap获取
this.route.queryParamMap.subscribe(data => {
const params = data['params'];
console.log(params['title'],params['name']);
});
}4.React框架实现：
4.1 使用React Hooks获取
React Hooks是React16中引入的新特性，它提供了一种简单而强大的方式来管理组件内部状态。我们可以使用useParams Hook轻松获取URL参数：
import { useParams } from "react-router-dom"
export default function Order() {
let params = useParams()
return <h2>title: {params.title}</h2>
}在上述示例代码中，我们使用useParams Hook获得了URL参数。useParams会自动从当前URL中提取参数并返回一个对象，我们可以通过解构来获取指定的参数值。
4.2 使用React Router获取
React Router是一个用于构建Single Page Application（SPA）的流行库，它提供了一个简单而强大的方法来处理URL相关的逻辑。我们可以使用其提供的withRouter高阶组件来获取URL参数：
{
import { withRouter } from 'react-router-dom';
function MyComponent(props) {
const paramValue = props.match.params.param;
// ...
}
export default withRouter(MyComponent);
}在上述示例代码中，我们使用withRouter将MyComponent包装，使其能够访问props.match属性。props.match.params可以访问URL参数。
需要注意的是，在使用withRouter之前，我们需要将MyComponent通过Route组件进行路由设置，例如：
{
import { Route } from 'react-router-dom';
// ...
}在Route组件中定义了一个:param参数，我们通过withRouter的方式将该参数注入到MyComponent组件中。
欢迎在评论区交流。
如果文章对你有所帮助，❤️关注+点赞❤️鼓励一下！博主会持续更新。。。。
我的博客：前端小阳仔
往期回顾
js对url进行编码解码（三种方式）
JS转换HTML转义符
你确定你会reduce方法？
js方法禁止查看源文件、防止复制、禁止F12、禁止右键、禁止选中、禁止另存、禁止缓存
ES6实用的技巧和方法有哪些？
JavaScript对文件上传类型限制(根据文件头信息判断)
JavaScript中的call、apply、 bind的用法、实现以及三者之间的区别？
es6数组的flat()，flatMap()函数用法文章来源：https://www.toymoban.com/news/detail-632693.html
＜a＞标签的download属性部分浏览器无法自动识别文件后缀文章来源地址https://www.toymoban.com/news/detail-632693.html
到了这里，关于JS获取地址栏参数的方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
