vue3获取url链接方法

在Vue 3项目中，获取URL链接是一个常见的需求。无论是为了从URL中提取参数、判断路由状态，还是进行页面间的跳转，掌握获取URL的方法都非常重要。介绍几种在Vue 3中获取URL链接的常见方法，并提供相应的代码示例。

1. 使用window.location对象

直接使用window.location

window.location 是浏览器提供的一个内置对象，可以直接访问当前页面的URL信息。它包含了多个属性和方法，可以方便地获取完整的URL或其各个部分。

javascript

  <div>
    <p>完整URL: {{ fullUrl }}</p>
    <p>协议: {{ protocol }}</p>
    <p>主机名: {{ hostname }}</p>
    <p>端口: {{ port }}</p>
    <p>路径: {{ pathname }}</p>
    <p>查询参数: {{ search }}</p>
    <p>哈希值: {{ hash }}</p>
  </div>
</p>


import { ref, onMounted } from 'vue'

// 定义响应式数据
const fullUrl = ref('')
const protocol = ref('')
const hostname = ref('')
const port = ref('')
const pathname = ref('')
const search = ref('')
const hash = ref('')

onMounted(() => {
  // 获取当前页面的URL信息
  fullUrl.value = window.location.href
  protocol.value = window.location.protocol
  hostname.value = window.location.hostname
  port.value = window.location.port
  pathname.value = window.location.pathname
  search.value = window.location.search
  hash.value = window.location.hash
})


<p>

这个例子展示了如何通过 window.location 对象来获取当前页面的各种URL信息。当组件挂载时，会自动读取并显示这些信息。

2. 使用Vue Router

如果你的项目使用了 Vue Router 来管理路由，那么可以通过路由器实例来获取URL信息。这种方式更加符合Vue的编程范式，且与路由功能紧密集成。

通过useRouter钩子

在组合式API中，我们可以使用 useRouter 钩子来获取路由器实例，进而获取URL信息。

javascript

  <div>
    <p>完整URL: {{ fullPath }}</p>
    <p>路径: {{ path }}</p>
    <p>查询参数: {{ query }}</p>
    <p>名称: {{ name }}</p>
  </div>
</p>


import { ref } from 'vue'
import { useRouter } from 'vue-router'

// 获取路由器实例
const router = useRouter()

// 定义响应式数据
const fullPath = ref('')
const path = ref('')
const query = ref('')
const name = ref('')

// 监听路由变化
router.afterEach((to) => {
  fullPath.value = to.fullPath
  path.value = to.path
  query.value = JSON.stringify(to.query)
  name.value = to.name
})

// 初始化时也获取一次当前路由信息
fullPath.value = router.currentRoute.value.fullPath
path.value = router.currentRoute.value.path
query.value = JSON.stringify(router.currentRoute.value.query)
name.value = router.currentRoute.value.name


<p>

这里我们不仅可以在组件挂载时获取当前的URL信息，还可以监听路由的变化，在每次路由更新时自动更新显示的内容。to 参数包含了目标路由的所有信息，如 fullPath（完整路径）、path（路径）、query（查询参数）和 name（路由名称）等。

3. 使用第三方库qs解析查询字符串

有时候我们可能只需要获取并解析URL中的查询参数。虽然可以直接使用 window.location.search 和原生JavaScript来进行处理，但为了更方便地操作查询字符串，可以引入第三方库 qs。

引入qs库解析查询参数

需要安装 qs 库：

bash npm install qs

然后在组件中使用它来解析查询参数：

javascript

  <div>
    <p>{{ key }}: {{ value }}</p>
  </div>
</p>


import { ref, onMounted } from 'vue'
import qs from 'qs'

// 定义响应式数据
const queryParams = ref({})

onMounted(() => {
  // 解析查询字符串
  const queryString = window.location.search.substring(1) // 去掉开头的问号
  queryParams.value = qs.parse(queryString)
})


<p>

这样就可以轻松地将查询字符串转换为一个易于操作的对象形式，比如对于 URL /page?name=John&age=30 ，queryParams 的值将是 { name: "John", age: "30" }。

以上就是在Vue 3中获取URL链接及其相关信息的几种常用方法。根据实际需求选择合适的方式，可以帮助我们更好地管理和利用URL中的数据。

(牛站网络)