web前端面试题附答案044 - vue获取param参数，有什么缺点吗？

        看这个vue的图标像不像小时候看的《魔神坛斗士》身上的某个元素。真希望成年人的世界就像小时候一样简单快乐。

        今天这道面试题主要围绕vue中获取param参数展开，看完本文你可以吸取到以下知识点

        ◇ 首先是最基本的2中获取方式 

        ◇ 如果不用vue应该怎么获取，以及hash路由的获取问题

        ◇ 接着说一下这种传参的缺点

        ◇ 最后会细说我们可以用哪些代替方法

目录

一、vue中获取param参数

1、query形式

2、param的形式

3、原生方法URLSearchParams

4、传统的split方法截取

二、params取参有什么缺点吗

1、带#的情况获取不到search

2、中文参数容易乱码

3、破坏域名的美观性 

三、其他的替代传参方式

1、存入浏览器缓存中再跳转

2、vuex

3、有时候又不得不带参数

---

一、vue中获取param参数

        1、query形式

        例如列表页，需要跳转到详情页，经常要给详情页传一个id，有助于详情页利用获取到的这个id值进行查询详情信息。所以就涉及到列表页往详情页传递id。

        query形式的写法：

// router 文件
{
  path: '/detail',
  name: 'Detail',
  component: Detail
}
 
// list页跳转前
this.$router.push({
   path: '/detail',
   query : {
     bookId: 'DXF00137'
   }
})
 
// 页面Url示例
https://a.xx.com/detail?bookId=DXF00137
 
// detail页获取 bookId
created() {
  let bookId = this.$route.query.bookId
},

       

         2、param的形式

        还有一种形式，是将参数附着于URL本身，并不是问号后面挂接参数

// router 文件
{
  path: '/detail/:bookId',
  name: 'Detail',
  component: Detail
}
 
// list页跳转前
let bookId = 'DXF00137';
this.$router.push({
   path: '/detail/' + bookId,
})
 
// 页面Url示例
https://a.xx.com/detail/DXF00137
 
// detail页获取 bookId
created() {
  let bookId = this.$route.params.id
},

       

         3、原生方法URLSearchParams

        正常的页面url对于服务端来说是一个get请求，所以所有参数都会被带在url上，甚至会很长，比如https://a.xx.com?a=12&b=13&name=中国人&class=sdf 甚至有时候上面还会带一些特殊符号，带中文等等，那么不用vue的时候呢，都是这样获取的：

// 例如当前url https://a.xx.com?name=44
 
function geturlparam(key){
   let url = window.location.href;
   let params = url.split('?')[1]
   let getParam = new URLSearchParams(p);
   return getParam.get(key);
}
geturlparam('name'); // 44

       

        4、传统的split方法截取

                如果不借助原生方法，也不用使用框架方法，在之前jquery时代，大家都是通过先截取问号，再截取一个一个的&符号进行获取，代码就像这样：

// 例如当前url https://a.xx.com?name=44
 
function geturlparam(key){
   var searchQuery = window.location.search.substring(1);
   var params = query.split("&");
    for (var i=0;i<params.length;i++) {
        var par = params[i].split("=");
        if(par [0] == key){return par [1];}
    }
    return null;
}
geturlparam('name'); // 44

二、params取参有什么缺点吗

       

        1、带#的情况获取不到search

        不仅仅是vue，很多框架为了前端性能，采取了hash路由的方式，但这种方式通过window.location.search却获取不到值，返回的是null

        因为window.location.search获取的是 ? 之后一直遇到 #  ，如果没有 # 那么获取的就是 ？ 之后的那些参数

        比如我们的url 经常是  http://localhost:8080/#/list?taskName=33  这种情况是获取不到window.location.search的值的

        这个时候可以这样获取：

function geturlparam(key){
   var newSearch = window.location.hash.split("?")[1];
   if(newSearch){
      var reg = new RegExp("(^|&)"+ key +"=([^&]*)(&|$)");
      var paramArr = reg.match(reg);
      if(paramArr != null) {
          return decodeURIComponent(paramArr[2]);
       }
       return null;
   }
}

       

        2、中文参数容易乱码

        前面的例子传递的参数都是数字或者英文字符，所以是没有问题的，但很多浏览器目前对于url带中文还是支持的不够好，会出现乱码。之前的IE浏览器就经常出现这种问题。

        所以在传输过程中，需要进行必要的编码与解码。

        

       

        3、破坏域名的美观性 

          有个非常赚钱的行业叫炒米，就是买卖域名。买家希望买到的域名是简短的，有含义的，大厂不惜高价买一个域名用，说明域名的作用是非常重大的。

        但这么有价值的域名，在我们广大开发人员手中发挥出了他本不应该承受的重量。例如www.aa.com/list/detail?stuName=楚中天&gender=中 .

        可见一个非常完美的域名，本该是一个让人赏心悦目的艺术品，但一旦用于具体业务，就掺杂了各种url，参数，有的还有带很长一串标识的。

三、其他的替代传参方式

       

         1、存入浏览器缓存中再跳转

        不管是cookie，还是localStorage存储，存放一个url的参数还是没有问题的，可以在页面跳转之前先将参数存入浏览器缓存，当跳转到下一个页的时候再进行获取。

        这样不仅不会使url带有很多参数而感到丑陋，还可以携带更多的参数信息过来

       

         2、vuex

        △ 如果是单页面应用的项目，可以利用vuex的store将要携带的参数暂时存储起来。到了下一个页面就可以自动获取，这样还节省了与浏览器交互的时间。

       △  但这种方式使用场景会有问题，如果是在浏览器呢，用户是可以刷新页面的，一旦在第二个页面刷新一下，上一个页面存到store里的数据就丢失了；

        △ 但如果是嵌套在APP内部的webview里，用户就刷新不了页面，从而避免store丢失的问题

       

         3、有时候又不得不带参数

        例如一些站外引流的场景，当用户把某个页面分享到facebook这些社交软件，朋友在跳回来的时候，为了业务需要，必然是要携带上参数的，这种情况就不可避免了。以上2中方法都无效了。

        

        我想如果这样回答这道题，应该是可以过关了吧。