history模式自定义分享链接的参数,当别人点击链接的时候,分享次数才能增加
时间: 2024-03-04 20:54:05 浏览: 70
如果要自定义分享链接的参数,并且在别人点击链接的时候才能增加分享次数,可以按照以下步骤实现:
1. 在路由中定义分享链接的参数
在使用history模式的Vue路由中,可以通过定义路由参数来实现自定义分享链接。例如,我们可以定义一个`shareId`参数,用来记录分享ID:
```javascript
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
component: Home
},
{
path: '/detail/:id',
component: Detail
},
{
path: '/share/:shareId',
component: Share
}
]
});
```
2. 生成分享链接
在需要分享的页面中,可以通过以下代码生成分享链接:
```javascript
const shareId = generateShareId(); // 生成分享ID
const shareUrl = `https://www.example.com/share/${shareId}`; // 分享链接
// 分享到微信朋友
wx.updateAppMessageShareData({
title: '分享标题',
desc: '分享描述',
link: shareUrl,
imgUrl: '分享图标',
success: function() {
// 分享成功后的回调函数
console.log('分享到微信朋友成功');
// 向后端发送请求,记录分享次数
axios.post('/share', { shareId: shareId }).then(function(res) {
console.log('分享次数已记录');
});
}
});
// 分享到微信朋友圈
wx.updateTimelineShareData({
title: '分享标题',
link: shareUrl,
imgUrl: '分享图标',
success: function() {
// 分享成功后的回调函数
console.log('分享到微信朋友圈成功');
// 向后端发送请求,记录分享次数
axios.post('/share', { shareId: shareId }).then(function(res) {
console.log('分享次数已记录');
});
}
});
```
其中,`generateShareId()`是用来生成分享ID的函数,可以根据需求自行实现。`axios.post('/share', { shareId: shareId })`是向后端发送请求,记录分享次数,`shareId`是分享ID。
3. 处理分享链接的参数
在分享链接被点击时,需要获取分享链接中的参数,并根据参数记录分享次数。可以在`Share`组件中处理分享链接的参数:
```javascript
export default {
created() {
const shareId = this.$route.params.shareId; // 获取分享ID
axios.post('/share', { shareId: shareId }).then(function(res) {
console.log('分享次数已记录');
});
}
}
```
以上代码中,`this.$route.params.shareId`是获取分享链接中的`shareId`参数,然后向后端发送请求,记录分享次数。
完整代码示例:
```javascript
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
component: Home
},
{
path: '/detail/:id',
component: Detail
},
{
path: '/share/:shareId',
component: Share
}
]
});
const shareId = generateShareId(); // 生成分享ID
const shareUrl = `https://www.example.com/share/${shareId}`; // 分享链接
// 分享到微信朋友
wx.updateAppMessageShareData({
title: '分享标题',
desc: '分享描述',
link: shareUrl,
imgUrl: '分享图标',
success: function() {
// 分享成功后的回调函数
console.log('分享到微信朋友成功');
// 向后端发送请求,记录分享次数
axios.post('/share', { shareId: shareId }).then(function(res) {
console.log('分享次数已记录');
});
}
});
// 分享到微信朋友圈
wx.updateTimelineShareData({
title: '分享标题',
link: shareUrl,
imgUrl: '分享图标',
success: function() {
// 分享成功后的回调函数
console.log('分享到微信朋友圈成功');
// 向后端发送请求,记录分享次数
axios.post('/share', { shareId: shareId }).then(function(res) {
console.log('分享次数已记录');
});
}
});
export default {
created() {
const shareId = this.$route.params.shareId; // 获取分享ID
axios.post('/share', { shareId: shareId }).then(function(res) {
console.log('分享次数已记录');
});
}
}
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)