看这个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=44function 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=44function geturlparam(key){var searchQuery = window.location.search.substring(1);var params = query.split("&");for (var i=0;i

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;}
}