vue3读取当前路由地址

在Vue 3中，你可以通过`this.$route`对象来获取当前路由的相关信息。`$route`是一个来自Vue Router的内置属性，它包含了当前路由的详细配置。以下是如何读取一些常用的信息：

1. 路径（Path）：

let currentPath = this.$route.path;

2. 全部路径（Full Path，包括查询参数）：

let fullPath = this.$route.fullPath;

3. 查询参数（Query）：

let queryParams = this.$route.query; // 例如 { param1: 'value1', param2: 'value2' }

4. 布尔型查询参数（Query with boolean values）：

let isParamTrue = this.$route.query.boolParam === true; // 如果查询参数为true

5. 静态路由名称（Name）（如果有设置）：

let routeName = this.$route.name;

要监听路由变化，可以使用`$router`的`beforeEach`、` afterEach` 或者 `导航守卫` (guards)。

相关问题

vue3 获取当前路由

### Vue3 中获取当前路由的方法

在 Vue3 中，推荐使用组合式 API 来获取当前路由信息。具体实现如下：

#### 使用 `useRouter` 和 `useRoute`

为了获取当前路由的信息，在组件内部可以通过引入 `vue-router` 提供的辅助函数来完成操作。

import { useRouter, useRoute } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const route = useRoute();

    // 打印整个路由对象
    console.log(route);

    // 访问具体的路径属性
    console.log(route.path); // 输出: '/some/path'

    return {
      path: route.path,
      fullPath: route.fullPath,
      query: route.query,
      params: route.params
    };
  }
}

当只需要路由器实例时，可以单独调用 `useRouter()` 函数[^1]；如果目标是直接获得匹配到的路由记录，则应该选用 `useRoute()` 函数[^4]。后者会返回一个包含所有关于当前激活路由详情的对象，比如路径、参数以及查询字符串等。

对于那些仍然习惯于选项式API风格的人来说，也可以按照下面的方式工作：

import { onMounted } from 'vue';
import { useRouter } from 'vue-router';

export default {
  mounted() {
    const router = useRouter();
    console.log(router.currentRoute.value.path);
  },
};

这里需要注意的是，由于 `currentRoute` 是响应式的 Ref 对象，因此要读取其实际值的时候需要用 `.value` 属性访问器[^3]。

vue3获取跳转路由参数

### Vue3 中获取路由参数的方法

#### 使用 `useRoute` 钩子
为了在 Vue 3 组件中获取路由参数，可以利用 Composition API 提供的 `useRoute` 函数。此函数允许开发者轻松访问当前路由的信息。

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    
    // 访问查询字符串参数
    console.log(route.query); 

    // 如果需要特定参数可以直接指定键名
    const specificParam = route.query.parameterName;
    
    return {
      specificParam,
    };
  },
};

上述代码展示了如何导入并调用 `useRoute()` 来获得整个查询对象以及单个查询项[^1]。

对于带有类型定义的应用程序来说，在 TypeScript 环境下同样适用这种方式：

import { defineComponent, ref } from 'vue';
import { useRoute } from 'vue-router';

export default defineComponent({
  name: "MyComponent",
  setup() {
    const route = useRoute();

    let text = ref<string | undefined>(route.query.text as string);

    return {
      text,
    }
  }
});

这段示例说明了即使是在使用TypeScript的情况下也可以方便地处理来自URL中的数据[^2]。

需要注意的是当涉及到路径参数(`params`)而非查询参数(`query`)时，如果指定了具体的路径，则不会应用这些额外的参数；也就是说在这种情况下应该避免同时设置path和params属性[^3]。

另外一种方法是通过组合式API里的`onMounted`生命周期钩子配合`currentRoute.value`来读取初始加载完成后的路由状态:

import { useRouter, onMounted } from 'vue-router'

setup () {
  const router = useRouter()

  onMounted(() => {
    console.log(router.currentRoute.value.query);
  })

  return {}
}

这种方法适用于那些希望仅在组件挂载之后才去检查一次路由信息的情形[^4]。