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

经海路大白狗

已于 2022-11-05 16:41:00 修改

阅读量1.2k

点赞数 8

分类专栏：前端面试千题计划文章标签：前端 vue.js javascript 前端框架 html

于 2022-11-03 23:52:57 首次发布

本文链接：https://blog.csdn.net/xingyu_qie/article/details/127678895

版权

前端面试千题计划专栏收录该内容

73 篇文章 26 订阅

订阅专栏

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

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

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

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

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

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

一、vue中获取param参数

1、query形式

2、param的形式

3、原生方法URLSearchParams

一、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中方法都无效了。

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

经海路大白狗

关注

8
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
6
评论
web前端面试题附答案044 - vue获取param参数，有什么缺点吗？

今天这道面试题主要围绕vue中获取param参数展开，看完本文你可以吸取到以下知识点首先说一下最基本的2中获取方式，然后是如果不用vue应该怎么获取，接着说一下这种传参的缺点，最后会细说我们可以用哪些方法代替
复制链接

扫一扫