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}`);

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