Vue.js vuejs-如何将文本连接到命名路由
如何将命名路由连接到路由器链接标记?我的代码:Vue.js vuejs-如何将文本连接到命名路由,vue.js,vue-router,Vue.js,Vue Router,如何将命名路由连接到路由器链接标记?我的代码: <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
<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}}
它返回
[Object Object]
。如何修复它以返回此对象的正确值,即http://example.com/profile/1
例如?没有必要将路由器链接
用于外部链接,因为不应使用vue路由器
处理它的点击
我建议创建一个计算属性(或方法),它将返回包含所有数据的完整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}`
}
}