const urlParams = new URLSearchParams(window.location.search);
let key = urlParams.get("key"); // 'key'是要获取的参数名
VUE框架实现
1 、查询参数获取
若地址栏URL为:test/123?id=1&title=abc,我们要获取到地址栏后面的的id和title参数,如何才能拿到呢?
<script setup>
import {useRouter} from 'vue-router'
const { currentRoute } = useRouter();
const route = currentRoute.value;
onMounted(()=>{
let id=route.query.id
console.log('id', id) // 1
})
</script>
2 、获取路径参数
我们需要从地址test/123上拿到123这个参数。
首先需要在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) // 123
})
</script>