Vue3实现带用户ID的路由路径复制与深度跳转功能

一、修改跳转逻辑，带上用户ID参数 #

原来的跳转仅进入路由未携带参数，现在调整代码，把用户ID作为query参数传入路由：

// 选中账户后的处理逻辑
store.setSelectedUser(data.id)
router.push({ path: '/user/dashboard', query: { id: data.id } })

二、实现分享链接生成与复制功能 #

给页面添加复制按钮，绑定点击事件生成并复制带ID的URL：

<template>
  <button @click="copyShareLink">复制用户仪表盘链接</button>
</template>

<script>
export default {
  methods: {
    copyShareLink() {
      const userId = this.$store.state.selectedUserId // 从store取当前选中的用户ID
      const shareUrl = `${window.location.origin}/user/dashboard?id=${userId}`
      
      // 调用浏览器剪贴板API复制
      navigator.clipboard.writeText(shareUrl)
        .then(() => {
          alert('链接已复制成功')
        })
        .catch(err => {
          console.error('复制失败:', err)
        })
    }
  }
}
</script>

三、路由拦截，读取URL参数并更新Store #

在Vue Router的全局守卫中，拦截进入/user/dashboard的请求，读取query.id并同步到store：

// router/index.js
import router from './router'
import store from '../store'

router.beforeEach((to, from, next) => {
  // 目标路由是用户仪表盘且带ID参数
  if (to.path === '/user/dashboard' && to.query.id) {
    const targetUserId = to.query.id
    // 更新store中的选中用户
    store.setSelectedUser(targetUserId)
    // 若需要提前拉取用户数据，可在此调用action
    // store.dispatch('getUserDashboardData', targetUserId)
  }

  // 验证用户是否已认证（可选）
  const isAuth = store.state.isAuthenticated
  if (to.path === '/user/dashboard' && !isAuth) {
    next('/login')
    return
  }

  next()
})

也可以直接在仪表盘组件的生命周期钩子中处理参数：

<script>
export default {
  created() {
    const userId = this.$route.query.id
    if (userId) {
      this.$store.setSelectedUser(userId)
      // 加载对应用户的数据
      this.loadUserDashboard(userId)
    }
  },
  methods: {
    loadUserDashboard(userId) {
      // 调用API获取用户仪表盘数据
    }
  }
}
</script>

注意事项 #

• 确保store的setSelectedUser方法能正确更新状态，且组件会根据store数据自动渲染对应内容。
• 如果分享链接在生产环境使用，记得用生产环境的域名替换window.location.origin，或者直接用相对路径拼接后补全域名。

内容的提问来源于stack exchange，提问作者guyman