JAVA高级面试进阶训练营视频教程

admin

vue在微信

问题1: vue单页面项目hash模式下的非一级页面实现微信分享，分享出去的页面会跳回首页

问题分析：微信分享中：只要是分享出去的页面，如果为hash模式（在路由中带有#号），微信都会在#的前边给加一个‘？’。而vue单页面程序中除了一级页面以外的其他页面都是通过#/后面的路由导航过去的，so,理所当然就被华丽丽的截掉了，于是就会发现你二级页面分享出去的链接点进去是一级页面

踩过的坑：试过网上的方法，新建一个ridrect.html做重定向，的确挺有用，然而毕竟分享的是一个很奇怪的链接，出现一些奇怪的问题也没毛病，然而作为一个有追求的程序猿，这个方法是一定要pass的

解决方案：/*有bug了，下次继续*/

坑了好久，不仅坑了，还挖了好几个新坑，对不起大家，新做的项目没有bug，哈哈，赶紧回来填填

（1）简单粗暴，直接将自己的页面定为一级页面问题就不是问题了，哈哈，我在说什么废话

（2）正经方案：在分享的链接上带上一个自定义的分享标识参数来标记你要分享的二级页面，在App.vue里面根据这个标识判断一下页面的来源并根据参数指示将路由跳转到相应的页面即可，当然不要忘记把其他参数带过去哦。比如我在该项目中有                         两个二级页面要分享

const shareWxLink1 = getPageUrl('article/detail', {
   id: this.id,
   channelId: this.channelId,
   fromType: 'detail'
})
const shareWxLink2 = getPageUrl('article/list', {
   channelId: this.channelId,
   fromType: 'list'
})

　　

　在App.vue中就能根据fromType来判断并进行相应的跳转

const fromType = this.$route.query.fromType
if (fromType === 'detail') {
  window.location.href = getPageUrl('article/detail', {
    id: this.$route.query.id,
    channelId: this.$route.query.channelId
  })
}  else if (fromType === 'list')  {
  window.location.href = getPageUrl('article/list', {
    channelId: this.$route.query.channelId
  })
}

　　

问题2: vue项目同路由页面跳转，只改变了页面参数，点击跳转后发现页面并没有变化，查看路由会发现路由已经变化，但页面就是不变

解决方案：总有人看不惯我的优秀，打扰我创作，这次没bug，有新需求了，下次继续