vue3怎么获取浏览器地址栏中的参数

在Vue3中，可以使用`URLSearchParams` API 或者 `window.location.search` 来获取浏览器地址栏中的查询参数。这里提供两种方法：

**方法一：使用 `URLSearchParams`**

import { useRouter } from 'vue-router'

// 在组件内
const router = useRouter()
router.currentRoute.query // 这将返回一个对象，包含了所有查询参数

// 获取特定参数
function getParam(paramName) {
  return router.currentRoute.query[paramName] || ''
}

**方法二：使用 `window.location.search`**

const params = new URLSearchParams(window.location.search.slice(1)) // 去掉 ? 后面的部分
params.get('paramName') // 获取名为 'paramName' 的参数

在这里，`window.location.search`会返回`?`后面的所有查询字符串，我们需要去掉开头的`?`，再解析成`URLSearchParams`对象。

这两种方法都可以让你访问和操作浏览器地址栏中的参数。

相关问题

vue3 控制浏览器工具栏打开

您可以使用 `window.open` 方法来打开新的浏览器窗口，并传入需要打开的网址和窗口参数。在窗口参数中，您可以指定是否显示工具栏、菜单栏、地址栏等浏览器组件。以下是一个示例代码：

window.open('https://www.example.com', '_blank', 'toolbar=no, menubar=no, resizable=yes, width=500, height=500');

在上述代码中，第一个参数是需要打开的网址，第二个参数是窗口名称，第三个参数是窗口参数，其中 `toolbar=no` 表示不显示工具栏， `menubar=no` 表示不显示菜单栏， `resizable=yes` 表示可以改变窗口大小， `width` 和 `height` 分别指定窗口的宽度和高度。

注意：由于浏览器安全限制，有些浏览器可能会忽略您传入的窗口参数。

vue3路由传值，修改地址栏参数而不刷新页面

在Vue3中，我们通常使用动态路由或者是`<router-link>`组件配合Vuex来实现在不刷新页面的情况下修改URL参数并传递数据。以下是两种常见的方法：

1. 动态路由匹配：
使用动态部分`{}`包裹需要传递的变量名，例如：

   <router-link :to="{ path: '/user/:userId', params: { userId: '123' }}">用户详情</router-link>

这样点击链接时，`userId`参数会被替换为实际值，并且浏览器地址栏会更新。

2. `this.$router.push`配合Vuex：
- 首先，在`store`中定义状态并监听变化：

     export const state = () => ({
       user: {}
     });
     export const mutations = {
       setUser(state, userId) {
         state.user.id = userId;
       }
     };

- 然后，在组件内，通过`dispatch`方法改变状态并更新路径：

     this.$store.dispatch('setUser', '123');
     this.$router.push(`/user/${state.user.id}`);

这样做，页面不会重新加载，只是局部刷新，显示对应的用户详情。