欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript獲取地址欄參數(shù)的方法實(shí)現(xiàn)

 更新時(shí)間：2023年07月21日 09:52:42   作者：富朝陽(yáng)  
這篇文章主要給大家介紹了關(guān)于JavaScript獲取地址欄參數(shù)的方法實(shí)現(xiàn),項(xiàng)目中經(jīng)常遇到獲取上個(gè)頁(yè)面跳轉(zhuǎn)過(guò)來(lái)獲取當(dāng)前的參數(shù),文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

需求

若地址欄URL為：code-nav/article/917?type=12&title=abc，我們要獲取到地址欄后面的的type和title參數(shù)，如何才能拿到呢？

解決方案

1.原生JS實(shí)現(xiàn)：

1.1 采用正則表達(dá)式獲取地址欄參數(shù)(第一種方法)

//獲取地址欄參數(shù)，key:參數(shù)名稱(chēng)
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"); // 12

1.2 傳統(tǒng)方法截取實(shí)現(xiàn)（第二種方法）

//獲取地址欄參數(shù)
function getUrlParams() {
	let url = window.location.search; //獲取url中"?"符后的字串
	let paramsObj = new Object();
	if (url.indexOf("?") != -1) {
		let str = url.substr(1);
		strs = str.split("&");
		for (let i = 0; i < strs.length; i++) {
			paramsObj[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
		}
	}
	return paramsObj;
}
let type = getUrlParams().type; // 12
let title = getUrlParams().title; // abc

2.Vue框架實(shí)現(xiàn)：

2.1 查詢(xún)參數(shù)獲取（場(chǎng)景一）

我們需要從地址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 獲取路徑參數(shù)（場(chǎng)景二）

我們需要從地址code-nav/article/917上拿到917這個(gè)參數(shù)。

首先需要在router/index.js中定義好路由以及路徑參數(shù)，如下代碼：

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組件中通過(guò)路由useRouter得到參數(shù)，注意是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>

3.Angular框架實(shí)現(xiàn)：

3.1 矩陣URL參數(shù)獲取（場(chǎng)景一）

參數(shù)拼接：

  constructor(
      private router: Router,
  ) {}
  // 拼裝 matrix url
  // code-nav/article;type=12;title=abc 
  go() {
      this.router.navigate(['/code-nav/article', { 
        type: 12, 
        title: 'abc', 
      }]);
  }

使用 this.route.params 或 this.route.paramMap 來(lái)獲取 matrix URL 參數(shù)：

  constructor(
    private route: ActivatedRoute 
  ) { }
  ngOnInit() {
    // 獲取參數(shù)， 使用 params
    this.route.params.subscribe(params => {
        console.log(params['type'],params['title']);
    });
    // 使用 paramMap
    this.route.paramMap.subscribe(data => {
        console.log(data['params'].type,data['params'].title);
    })
  }

3.2 傳統(tǒng)獲?。▓?chǎng)景二）

snapshot , queryParams ,  queryParamMap

constructor(
    private route: ActivatedRoute
  ) { }
  ngOnInit() {
    // 獲取參數(shù)， 使用 queryParams
    let param1 = this.route.snapshot.queryParams["title"];
    let param2 = this.route.snapshot.queryParams["type"];
    console.log(param1);
    console.log(param2);
    this.route.queryParams.subscribe(params => {
        console.log(params['title'],params['name']);
    });
    // 獲取參數(shù)， 使用 queryParamMap
    this.route.queryParamMap.subscribe(data => {
        const params = data['params'];
        console.log(params['title'],params['name']);
    });
  }

4.React框架實(shí)現(xiàn)：

4.1 查詢(xún)參數(shù)獲?。▓?chǎng)景一）

import { useParams } from "react-router-dom"
export default function Order() {
  let params = useParams()
  return <h2>title: {params.title}</h2>
}

總結(jié)

到此這篇關(guān)于JavaScript獲取地址欄參數(shù)的方法實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)JS獲取地址欄參數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論