Vue （vue-router）路由传参

前端 79° Views

在 Vue.js 应用中，使用 Vue Router 进行路由管理时，常常需要在不同的路由之间传递参数。Vue Router 提供了几种方式来实现路由传参，包括通过 URL 路径参数、查询参数和命名视图。以下是一些常见的方法和示例：

1. 路径参数（Route Parameters）

路径参数通常用于传递具有唯一标识意义的参数，如用户 ID、文章 ID 等。

定义路由

// router/index.js  
import Vue from 'vue';  
import Router from 'vue-router';  
import User from '@/components/User.vue';  
import Post from '@/components/Post.vue';  
  
Vue.use(Router);  
  
export default new Router({  
  routes: [  
    {  
      path: '/user/:id', // 这里的 `:id` 是一个动态段  
      name: 'User',  
      component: User  
    },  
    {  
      path: '/post/:postId', // 这里的 `:postId` 是一个动态段  
      name: 'Post',  
      component: Post  
    }  
  ]  
});

访问路由并传递参数

// 在某个组件中  
this.$router.push({ name: 'User', params: { id: 123 } });  
this.$router.push({ name: 'Post', params: { postId: 456 } });

在组件中获取参数

// User.vue  
<template>  
  <div>User ID: {{ $route.params.id }}</div>  
</template>  
  
<script>  
export default {  
  computed: {  
    userId() {  
      return this.$route.params.id;  
    }  
  }  
};  
</script>  
  
// Post.vue  
<template>  
  <div>Post ID: {{ $route.params.postId }}</div>  
</template>  
  
<script>  
export default {  
  computed: {  
    postId() {  
      return this.$route.params.postId;  
    }  
  }  
};  
</script>

2. 查询参数（Query Parameters）

查询参数通常用于传递非唯一标识意义的参数，如搜索条件、分页信息等。

定义路由（不需要特殊定义）

// router/index.js  
import Vue from 'vue';  
import Router from 'vue-router';  
import SearchResults from '@/components/SearchResults.vue';  
  
Vue.use(Router);  
  
export default new Router({  
  routes: [  
    {  
      path: '/search',  
      name: 'SearchResults',  
      component: SearchResults  
    }  
  ]  
});

访问路由并传递参数

// 在某个组件中  
this.$router.push({ name: 'SearchResults', query: { q: 'vue', page: 2 } });

在组件中获取参数

// SearchResults.vue  
<template>  
  <div>  
    <p>Search Query: {{ $route.query.q }}</p>  
    <p>Page: {{ $route.query.page }}</p>  
  </div>  
</template>  
  
<script>  
export default {  
  computed: {  
    searchQuery() {  
      return this.$route.query.q;  
    },  
    page() {  
      return this.$route.query.page;  
    }  
  }  
};  
</script>

3. 编程式导航中的 props 传参

Vue Router 还支持将路由参数作为 props 传递给组件，这样可以使组件更加解耦和可复用。

定义路由时使用 props: true

// router/index.js  
import Vue from 'vue';  
import Router from 'vue-router';  
import User from '@/components/User.vue';  
  
Vue.use(Router);  
  
export default new Router({  
  routes: [  
    {  
      path: '/user/:id',  
      name: 'User',  
      component: User,  
      props: true // 这样可以将参数作为 props 传递给 User 组件  
    }  
  ]  
});

在组件中接收 props

// User.vue  
<template>  
  <div>User ID: {{ id }}</div>  
</template>  
  
<script>  
export default {  
  props: ['id']  
};  
</script>

使用 props 传递参数时，不需要通过 $route 对象来访问参数，直接通过 props 接收即可。

总结

  • 路径参数：适用于传递具有唯一标识意义的参数，如用户 ID。
  • 查询参数：适用于传递非唯一标识意义的参数，如搜索条件。
  • 编程式导航中的 props：使组件更加解耦和可复用。

通过这些方法，你可以在 Vue.js 应用中灵活地传递和使用路由参数。

本文固定连接：https://code.zuifengyun.com/2024/10/3587.html，转载须征得作者授权。

加载中...
加载中...