vuejs - 如何将文本连接到命名路由

Question

如何将命名路由连接到 router-link 标记？我的代码：

<router-link
    :to="'//https://t.me/share/url?url='+{name: Profile, params: {id: user.user_id}}+'&text=Hi I am ' + user.first_name + ' ' + user.last_name + ':'">Click Here</router-link>

问题出在这部分：

{name: Profile, params: {id: user.user_id}}

它 returns [Object object]。如何将其修复为 return 此对象的正确值，例如 http://example.com/profile/1？

Answer 1

不需要对外部 link 使用 router-link，因为它的点击不应该用 vue-router 处理。

我建议创建一个计算属性（或方法），它将 return 包含所有数据的完整 url。这也将从模板中删除某些逻辑，作为一种好的做法。

模板 link 将如下所示：

<a :href="telegramLink">Open Telegram</a>

并计算属性生成 link:

computed: {
  telegramLink () {
    const user = this.user

    // Get route information by provided parameters
    const route = this.$router.resolve({
      name: 'Profile',
      params: {
        id: user.user_id
      }
    })

    // Create full address url
    const url = `${window.location.origin}${route.href}`

    const text = `Hi I am ${user.first_name} ${user.last_name}:`

    return `https://t.me/share/url?url=${url}&text=${text}`
  }
}

vuejs - 如何将文本连接到命名路由

vuejs - How to concatenate text to named route

vue.js

vue-router