我要评论若地址栏url为：code-nav/article/917?type=12&title=abc，我们要获取到地址栏后面的的type和title参数，如何才能拿到呢？
解决方案：
1.原生js实现：
1.1 采用正则表达式获取地址栏参数(第一种方法)
//获取地址栏参数，key:参数名称
function geturlparams(key) {
let reg = new regexp("(^|&)" + key + "=([^&]*)(&|$)");
let r = window.location.search.substr(1)
.match(reg);
if (r != null)
return unescape(r[2]);
return null;
}
let title = geturlparams("title"); // abc
let type = geturlparams("type"); // 121.2 传统方法截取实现（第二种方法）
//获取地址栏参数
function geturlparams() {
let url = window.location.search; //获取url中"?"符后的字串
let paramsobj = new object();
if (url.indexof("?") != -1) {
let str = url.substr(1);
str = str.split("&");
for (let i = 0; i < str.length; i++) {
paramsobj[str[i].split("=")[0]] = decodeuri(str[i].split("=")[1]);
}
}
return paramsobj;
}
let type = geturlparams().type; // 12
let title = geturlparams().title; // abc2.vue框架实现：
2.1 查询参数获取（场景一）
我们需要从地址code-nav/article/917?type=12&title=abc上拿到title的value abc。
<script setup>
import {userouter} from 'vue-router'
const { currentroute } = userouter();
const route = currentroute.value;
onmounted(()=>{
let type=route.query.type
console.log('type', type) // 12
})
</script>2.2 获取路径参数（场景二）
我们需要从地址code-nav/article/917上拿到917这个参数。
首先需要在router/index.js中定义好路由以及路径参数，如下代码：
import { createrouter, createwebhistory } from 'vue-router'
const router = createrouter({
history: createwebhistory(import.meta.env.base_url),
routes: [
{
path: '/:id',
name: 'home',
component: () => import('../views/home.vue')
},
]
})
export default router接着就可以在home.vue组件中通过路由userouter得到参数，注意是route.params，如下代码：
<script setup>
import {userouter} from 'vue-router'
const { currentroute } = userouter();
const route = currentroute.value;
onmounted(()=>{
let id=route.params.id
console.log('id', id) // 917
})
</script>到此这篇关于js获取地址栏参数的两种方法(原生、vue)的文章就介绍到这了,更多相关js获取地址栏参数内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论