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

news2024/11/30 0:52:08

看这个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;
   }
}