vue-router: 使用router.beforeEach给路由添加参数时能打印出来，但地址栏不显示，

发布于
2019-09-12

如下：
因为之后要从一个外链进入这个项目首页，所以在第一次进入时拿到location上带的参数experimentId，其余的都从前一个对象的query拿到参数expeirmnetId
代码如下：

router.beforeEach((to,from,next)=>{
  if(to.path=="/home"&&from.path=="/"){
      to.query.experimentId=window.location.href.match(/experimentId=(.*)/)[1];
  }
 else{

  to.query.experimentId=from.query.experimentId

 }
  console.log(to)
  next();
})

第一次进入的地址栏类似：
图片描述

控制台打印出来的to对象如下：

{name: undefined, meta: {…}, path: "/home", hash: "", query: {…}, …}
fullPath: "/home"
hash: ""
matched: (2) [{…}, {…}]
meta: {}
name: undefined
params: {}
path: "/home"
query: {experimentId: "c897431296784b5a8b53d2aee08e77a3"}
__proto__: Object
切换其他路由时同样能打印出带参数的to对象，但地址栏却不显示参数了。
想知道如何能在地址栏也加上那个参数

vue-router

阅读 11.2k

4 个回答

✓ 已被采纳

可以换个思路，单页面的话就是hash里面玩玩。直接在hash前面的search动下手脚，只要全局是在用vue的$router对象跳转，就不会影响search了。而且hash里面的?也可以正常用

let aid = getQueryByString(location.href, 'aid') || ls.get('aid');

if (aid) {
  if(!ls.get('aid') && aid!='null' && aid!='undefined')ls.set('aid', aid)//退出登录的时候需要清空aid的localStorage
  let search = location.search;
  if(search.indexOf('?')===-1){
    search += '?aid='+aid
  }else{
    search.replace(/\?/,'?aid='+aid+'&')
  }
  console.log(search)
  location.search = search
}

获取地址栏中指定参数方法如下

/**
 *从字符串中拿到自己想要的键值对键值【如果有多个同键名的，取最后一个】
 * @param {*} str
 * @param {*} name
 */
export const getQueryByString = (str, name) => {
    //console.log(str, name);
    // 获取？号出现几次
    var tempArr = str.split('?');

    // //如果大于1
    if (tempArr.length - 1 > 1) {
        var rt = null;
        for (var i in tempArr) {
            var s = tempArr[i];
            var reg1 = new RegExp('(^|&)' + name + '=([^&]*)(&|$)'); // 构造一个含有目标参数的正则表达式对象
            var r1 = s.match(reg1); // 匹配目标参数
            if (r1 != null) {
                rt = decodeURIComponent(r1[2])// 一直覆盖，要最后的就行了
            }
        }

        return rt
    }

    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)'); // 构造一个含有目标参数的正则表达式对象
    if (!str.split('?')[1]) return null;
    var r = str.split('?')[1].match(reg); // 匹配目标参数

    if (r != null) {
        return decodeURIComponent(r[2])
    }
    return null // 返回参数值
};