js怎么获取框架url

通过JavaScript获取框架URL的方法有多种，主要包括使用window.location对象、document.referrer、以及借助框架特定的API来获取。 其中，最常见的方法是使用window.location对象，这种方法可以直接获取当前页面的完整URL，包括协议、主机名、路径和查询参数。接下来我们将详细讲解如何通过不同方法获取框架URL。

一、使用`window.location`对象

window.location对象是JavaScript中最常用的获取URL信息的方式。它包含了当前文档的URL信息，并提供了多种属性和方法来操作这些信息。

1. 获取完整的URL

使用window.location.href可以获取当前页面的完整URL。

const currentURL = window.location.href;
console.log(currentURL);

2. 获取URL的各个组成部分

window.location对象还提供了一些属性，可以分别获取URL的各个组成部分：

window.location.protocol：获取URL的协议部分（如http:或https:）。
window.location.host：获取URL的主机部分（包括域名和端口号）。
window.location.pathname：获取URL的路径部分。
window.location.search：获取URL的查询参数部分。
window.location.hash：获取URL的锚点部分。

const protocol = window.location.protocol;
const host = window.location.host;
const pathname = window.location.pathname;
const search = window.location.search;
const hash = window.location.hash;
console.log(`Protocol: ${protocol}`);
console.log(`Host: ${host}`);
console.log(`Pathname: ${pathname}`);
console.log(`Search: ${search}`);
console.log(`Hash: ${hash}`);

二、使用`document.referrer`

document.referrer属性可以获取到当前文档的来源URL，即用户是从哪个页面跳转到当前页面的。

const referrerURL = document.referrer;
console.log(referrerURL);

需要注意的是，document.referrer只能获取到用户来源页面的URL，而不能获取当前页面的URL。

三、使用框架特定的API

如果你使用的是某些特定的框架（如React、Angular、Vue等），它们通常提供了自己的API来获取和操作URL信息。

1. React

在React中，可以使用react-router-dom库提供的useLocation钩子来获取当前的URL信息。

import { useLocation } from 'react-router-dom';
function MyComponent() {
  const location = useLocation();
  console.log(location.pathname);
  console.log(location.search);
  console.log(location.hash);
  return <div>Check the console for URL details</div>;
}

2. Angular

在Angular中，可以使用ActivatedRoute和Router服务来获取和操作URL信息。

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html'
})
export class MyComponent implements OnInit {
  constructor(private route: ActivatedRoute, private router: Router) {}
  ngOnInit() {
    const currentURL = this.router.url;
    console.log(currentURL);
    this.route.queryParams.subscribe(params => {
      console.log(params);
    });
  }
}

3. Vue

在Vue中，可以使用vue-router库提供的$route对象来获取当前的URL信息。

export default {
  created() {
    const currentURL = this.$route.fullPath;
    console.log(currentURL);
    const queryParams = this.$route.query;
    console.log(queryParams);
  }
}

四、其他实用技巧

1. 动态改变URL

除了获取URL信息，window.location对象还可以用于动态改变当前页面的URL。

window.location.assign(url)：加载新的URL。
window.location.replace(url)：用新的URL替换当前页面（不会在浏览历史中留下记录）。
window.location.reload()：重新加载当前页面。

// 加载新的URL
window.location.assign('https://example.com');
// 用新的URL替换当前页面
window.location.replace('https://example.com');
// 重新加载当前页面
window.location.reload();

2. 解析查询参数

解析URL中的查询参数是一项常见的需求。可以通过URLSearchParams对象来实现。

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const paramValue = urlParams.get('paramName');
console.log(paramValue);

五、总结

通过JavaScript获取框架URL的方法主要包括使用window.location对象、document.referrer以及框架特定的API。其中，window.location对象是最常用的方式，因为它提供了丰富的属性和方法来获取和操作URL信息。此外，根据使用的框架，可以利用框架提供的API更加方便地获取URL信息。通过掌握这些方法，可以更灵活地处理URL相关的需求，提高开发效率。