vue3 拿到路由参数

在Vue 3中，你可以通过`$route.params`来获取路由参数。下面是一个示例：

import { useRoute } from 'vue-router'
export default {
  setup() {
    const route = useRoute()
    console.log(route.params)
    return { ... }
  }
}

在上述示例中，我们使用`useRoute()`来获取当前路由的信息，然后通过`route.params`来访问路由参数。你可以在控制台输出这些参数或在`return`语句中使用它们。

请注意，使用`useRoute()`需要在Vue 3中使用Vue Router版本为4.0或更高版本。

相关问题

在vue的哪个生命周期可以拿到路由参数

在Vue中，你可以在created生命周期钩子中获取到路由参数。可以通过this.$route.params来访问路由参数。例如：

created() {
  console.log(this.$route.params);
}

这将打印出当前路由的参数。请注意，如果你想在组件被复用时也能够获取新的路由参数，你需要监听$route对象的变化。

vue怎么拿到链接参数

在Vue.js中，你可以通过URLSearchParams API 或者更常见的`this.$route.query`属性来获取链接传递的参数。以下是两个简单的方法：

1. **使用URLSearchParams** (适用于现代浏览器)：

   function getParamsFromUrl(url) {
     const search = new URLSearchParams(window.location.search);
     return search;
   }
   
   // 调用该函数并获取参数
   const params = getParamsFromUrl(window.location.href);
   console.log(params.get('yourParamName')); // 获取名为'yourParamName'的参数值

2. **使用Vue Router 的$route对象** (推荐)：
如果你在项目中使用了Vue Router，那么可以在组件内的生命周期钩子如`mounted()`中访问路由查询参数：

   mounted() {
     this.params = this.$route.query; // 这里 'params' 就是你获取到的参数对象
     console.log(this.params.yourParamName); // 同样可以获取参数值
   }

你可以直接通过`.query`属性访问路由查询参数，它是一个对象，键就是参数名，值就是参数值。