Vue3将路由器路径与用户数据一起复制到剪贴板

yh2wf1be 于 2023-03-03 发布在 Vue.js

关注(0)|答案(1)|浏览(105)

我设置了一个搜索系统，它从API调用加载每个帐户的数据表，然后一旦您选择帐户ID，它就会将该帐户ID放在存储中，并将您路由到用户的 Jmeter 板，然后在那里根据该ID填充信息。

store.setSelectedUser(data.id)
router.push(user/dashboard)

因此，每个帐户的URL/路由名称显示如下：user/dashboard
但是，我需要用户能够按下按钮，并复制到他们的剪贴板的URL发送帐户链接通过电子邮件等，其中的URL将路由到该用户的 Jmeter 板，并显示正确的数据（假设他们经过身份验证）.
目前我没有太多使用Vue路由器的经验，因此在这方面的帮助将不胜感激
谢谢!
编辑：在做了更多关于vue路由器的研究之后，我相信我正在寻找的是一种从共享链接到特定用户的深度链接的方法
由于用户的ID在存储中，所以我需要URL（例如localhost:1234/user/dashboard），以便在从该页面（localhost:1234/user/dashboard+id:1111111或类似的内容）复制时附加特定用户的ID，然后在激活链接并将用户带到该 Jmeter 板时拦截所述查询参数，以便可以更新存储
还在寻找vue路由器更多，谢谢!

vue.js

来源：https://stackoverflow.com/questions/75583464/vue3-copy-router-path-to-clipboard-with-user-data

1条答案

按热度按时间

z4bn682m1#

使用Clipboard API及其writeText()函数完成复制到剪贴板。
当前路由的路径包含在Vue Router的路由对象中。您可以从标准window.location object获取域。实际上，您可以仅从window.location.href获取完整的URL，但这取决于您。

编辑：

如果链接需要基于商店中的ID指向特定配置文件，则必须将ID附加到URL。您还需要确保路由器可以导航到具有此类URL的 Jmeter 板。 Jmeter 板组件的已创建钩子可以处理设置商店的用户ID（如果URL中存在该ID），然后您可以使用该ID在页面上加载该用户的信息。

<button @click="copyURL">copy URL to clipboard</button>

computed: {
  userId () {
    return this.$store.state.userId
  }
}
methods: {
  copyURL() {
    navigator.clipboard.writeText(window.location.origin + this.$route.path + "/" + this.userId);
    window.alert('URL copied to clipboard!')
  }
},
created() {
  if (this.$route.params.id) {
    this.$store.state.userId = this.$route.params.id;
  }
}

- 路由器. js**

将导航到指定路径之一的控制面板：/user/dashboard/或/user/dashboard/12345

routes: [
  // dynamic segments start with a colon. append '?' to make optional
  { path: '/user/dashboard/:id?', component: Dashboard }
]

赞(0）回复(0）举报 2023-03-03

我来回答

Vue3将路由器路径与用户数据一起复制到剪贴板

1条答案

编辑：

相关问题

热门标签

最新问答