vue获取url上面的参数

在Vue.js中，你可以通过`this.$route`对象来获取URL上的查询参数。`$route`是Vue Router提供的一种全局API，它包含了当前路由的一些详细信息，包括路径、参数等。

获取URL参数的基本步骤如下：

1. 首先，确保你在模板文件（如`.vue`文件）中已经注入了`router`组件：

<template>
  <div>
    <!-- ... -->
    {{ paramsFromUrl }}
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import router from '@/router'; // 引入路由实例

const paramsRef = ref();

onMounted(() => {
  const urlParams = router.currentRoute.query; // 获取查询参数
  paramsRef.value = urlParams;
});
</script>

2. `paramsRef.value`现在包含了从URL查询中解析出的对象，你可以直接访问它的属性获取你需要的参数，例如：

console.log(paramsRef.value.name); // 如果参数名是"name"