JS获取地址栏参数的方法（原生、vue）

若地址栏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"); // 12

//获取地址栏参数
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; // abc

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.typeconsole.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.idconsole.log('id', id) // 917
})</script>