在vue项目中遇到了分享功能的bug，就是无论从什么地方，那个页面分享出去的链接地址，点击链接进来的都是首页，这就是#带来的坑，看下面代码 ：

//正常的链接地址是这样的
var url=www.baidu.com/#/.....
//通过微信分享出去的地址应该也是一样的
//我们认为地址是这样的
var url=www.baidu.com/#/.....
//其实他是这样的
var url=www.baidu.com/？#/.....
//当你点击链接发送请求的时候，他就变成这样了
var url=www.baidu.com/
//也就是参数全都没有了，所以进入首页了

　　那么怎么去解决这个问题呢？我先来说我们应该怎么做

//首先我们已经知道原因了，就是因为#的问题导致的，那么好，我们直接去掉#
var url=www.baidu.com//.....
//把#去掉，但后面的所有参数还是需要保留的

　　到这里，我们就需要解决地址不对的问题了，先说一个需要后端帮助的方法

//当用户点击链接将要进入的时候，让后端去判断一下这个链接有没有#，没有的话补上从新按照新连接发送就可以了
//后端获取的是这样的
var url=www.baidu.com//.....
//补全后是这样的
var url=www.baidu.com/#/.....
这就可以了

　　还有一种方法就是‘不求人’，自己解决，window.location里面就包含了请求的所有东西，那么我们就可以利用起来，

从图里面可以清晰地看到所有的参数，路径。。。那么我们就得想办法利用起来，我们可以利用路由守卫和编程式导航一起解决问题：

//这里首先我们用路由守卫
//全局路由守卫
router.beforeEach(to,from,next){
           //这里假设我们利用window.location获取到我们需要的各种参数
          vueRouter.push({参数})
}
//独享守卫的话和全局的差不多就是放在设专业的路由里面去设置，我就不写了

　　当然，后面这个方法有些麻烦，还是看你怎么方便怎么来！

 

版权声明：本文为ctb-web原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/ctb-web/p/9342821.html