vue3获取当前页面的信息

要获取当前页面的信息，可以使用Vue 3中的$route对象和$router对象。

1. 使用$route对象获取当前页面的路由信息

$route对象包含了当前页面的路由信息，可以通过$route对象的属性来获取当前页面的信息，如下所示：

<template>
  <div>
    <p>当前页面的路径：{{$route.path}}</p>
    <p>当前页面的名称：{{$route.name}}</p>
    <p>当前页面的参数：{{$route.params}}</p>
    <p>当前页面的查询参数：{{$route.query}}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$route.path); // 当前页面的路径
    console.log(this.$route.name); // 当前页面的名称
    console.log(this.$route.params); // 当前页面的参数
    console.log(this.$route.query); // 当前页面的查询参数
  },
};
</script>

2. 使用$router对象获取当前页面的路由器信息

$router对象包含了整个应用的路由器信息，可以通过$router对象的方法来获取当前页面的信息，如下所示：

<template>
  <div>
    <p>当前页面的路径：{{currentPath}}</p>
    <p>当前页面的名称：{{currentName}}</p>
    <p>当前页面的参数：{{currentParams}}</p>
    <p>当前页面的查询参数：{{currentQuery}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPath: "",
      currentName: "",
      currentParams: "",
      currentQuery: "",
    };
  },
  mounted() {
    this.currentPath = this.$router.currentRoute.value.path; // 当前页面的路径
    this.currentName = this.$router.currentRoute.value.name; // 当前页面的名称
    this.currentParams = this.$router.currentRoute.value.params; // 当前页面的参数
    this.currentQuery = this.$router.currentRoute.value.query; // 当前页面的查询参数
  },
};
</script>