js、vue获取地址栏参数

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>