vue中的路由参数如何获取

在 Vue.js 中，通过 $route 对象获取路由参数。方法包括使用 $route.params 对象、属性或在计算属性中使用。$route.params 是响应式的，当参数更改时组件会更新。

Vue.js 中获取路由参数

在 Vue.js 中，路由参数是通过 $route 对象访问的。$route 对象提供了有关当前路由的信息，包括路由参数。

如何获取路由参数

要获取路由参数，可以使用以下方法：

立即学习“前端免费学习笔记（深入）”；

1. 使用 $route.params 对象：

   <code class="js">// props 接收到的路由参数
   props: ['id'],
   data() {
     return {
       id: this.$route.params.id
     }
   }</code>

   登录后复制

2. 使用 this.$route.params 属性：

   

   如此AI员工

   国内首个全链路营销获客AI Agent

   71

   查看详情

   <code class="js">// this 接收到的路由参数
   data() {
     return {
       id: this.$route.params['id']
     }
   }</code>

   登录后复制

3. 在计算属性中使用 $route.params：

   <code class="js">computed: {
     id() {
       return this.$route.params.id
     }
   }</code>

   登录后复制

示例

以下是一个获取路由参数的示例：

<code class="js"><template>
  <div>
    <h1>当前 ID：{{ id }}</h1>
  </div>
</template>

<script>
export default {
  props: ['id'],
  data() {
     return {
       id: this.$route.params.id
     }
   }
}
</script></code>

以上组件将渲染一个带有 id 的 <h1> 标签，该 id 是从路由参数中获取的。

注意：

• 路由参数是响应式的，这意味着当参数发生更改时，组件将自动更新。
• 如果路由参数不存在，$route.params 将返回一个空对象。

以上就是vue中的路由参数如何获取的详细内容，更多请关注php中文网其它相关文章！