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

u0njafvf  于 2023-08-07  发布在  Vue.js
关注(0)|答案(2)|浏览(109)

如何将命名路由连接到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>

字符串
问题是这部分:
第一个月
它返回[Object object]。我如何修复它以返回该对象的正确值,例如http://example.com/profile/1

aiqt4smr

aiqt4smr1#

外部链接不需要使用router-link,因为它的点击不应该用vue-router处理。
我建议创建一个计算属性(或方法),它将返回一个包含所有数据的完整url。这也将从模板中删除某些逻辑,这是一个很好的实践。
模板链接如下所示:

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

字符串
和计算属性来生成链接:

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

nukf8bse

nukf8bse2#

您可以通过在to前面添加一个冒号,使用连接文本和变量来创建链接。

<router-link :to="'/districts/' + district.id " class="btn btn-danger cursor-pointer" title="Update District">
{{ district.id }}
</router-link>

字符串

相关问题