Vue 3 中的路由传参—优缺点分析及选择指南

前言

在 Vue 应用中，路由传参是一项常见的需求，它允许我们在不同的页面之间传递数据，实现更加灵活和动态的页面交互。下面我将介绍如何在 Vue 应用中实现路由传参，包括基本的路由参数传递和更复杂的场景下的传参技巧。

router与route区别

router是通过VueRouter构造函数new出来得到了的一个实例对象，这个对象是全局的路由对象，它包含了所有的路由对象和属性

route是一个页面的跳转路由对象，每一个页面都有一个route对象，是一个局部的路由对象

1.基本的路由参数传递

Vue Router 提供了简单且易用的方式来实现基本的路由参数传递。首先，在定义路由时，可以通过在路由路径中使用占位符来指定参数，例如：

const routes = [
  { 
      path: '/home/:Id', 
      name: 'home',   
      component: () => import('../views/Home.vue'),  
  }
]

在这个例子中，Id就是我们要传递的参数。然后，在组件中可以通过$route.params来访问这些参数：

this.$route.params.Id;

2.通过路由对象传递参数

除了通过 URL 参数传递外，还可以通过路由对象直接传递参数。这在需要传递的参数较多或者需要进行更复杂处理时非常有用。可以通过在路由对象的props字段中传递参数：

const routes = [
  { 
      path: '/home', 
      name: 'home',   
      component: () => import('../views/Home.vue'),
      props: { Id: '123' } 
   }
]

然后在组件中就可以直接通过props接收参数：

props: ['Id'],

3.路由元信息传递参数

在路由定义中使用元信息来传递参数。例如，定义一个带有元信息的路由：

const routes = [
  { 
      path: '/home', 
      name: 'home',   
      component: () => import('../views/Home.vue'),
      meta:{
          Id: 123 
      }
   }
]

在组件中可以通过$route.meta来获取参数值：

this.$route.meta.Id;

4.命名路由传递参数

在路由定义中给每个路由设置一个唯一的名称，然后通过名称来传递参数。例如，定义一个带有命名路由的路由：

const routes = [
  {
    path: '/user/:username',
    name: 'user',
    component: User,
  },
]

在组件中可以通过$router.push或router-link的to属性来传递参数：

router.push({ name: 'user', params: { username: 'erina' } })

<router-link :to="{ name: 'user', params: { username: 'erina' }}">
  User
</router-link>

5.Query属性传递参数

在URL中使用查询字符串来传递参数。例如，定义一个带有查询参数的路由：

const routes = [
  { 
      path: '/home', 
      name: 'home',   
      component: () => import('../views/Home.vue'),  
  }
]

在组件中可以通过$route.query来获取参数值：

this.$route.query.id

6.使用 Vuex 管理路由参数

对于复杂的应用场景，可能需要在多个组件之间共享路由参数，这时可以考虑使用 Vuex 来管理路由参数。在路由跳转时，将参数保存到 Vuex 中，在需要的组件中直接从 Vuex 中获取参数，这样就实现了参数的全局共享和统一管理。

优缺点分析

1. 基本的路由参数传递：

优点：通过 URL 参数传递，使用简单，直接体现在路由路径上，易于理解和实现。

缺点：参数暴露在 URL 中，可能导致安全风险，特别是对于敏感信息的传递需要格外小心。

2. 通过路由对象传递参数：

优点：参数不暴露在 URL 中，相对更安全一些。

缺点：需要在路由定义时额外配置参数，有一定的工作量，尤其是对于需要传递多个参数的情况。

3.路由元信息传递参数：

优点：参数可以在路由定义中灵活设置；适合传递静态参数。

缺点：参数无法直接嵌入在URL中，不适合传递动态参数。

4.命名路由传递参数：

优点：参数通过路由名称传递，不依赖具体的URL；适合传递动态参数。

缺点：需要提前定义路由名称。

5.Query属性传递参数：

优点：参数直接嵌入在URL中，易于理解和传递；适合传递多个参数。

缺点：参数较长时，URL可能会变得冗长。

5. 使用 Vuex 管理路由参数：

优点：参数通过 Vuex 管理，可以实现全局共享，方便不同组件之间的数据交互和状态管理。

缺点：使用 Vuex 管理路由参数需要引入 Vuex 库，如果应用本身不太复杂，引入 Vuex 可能会增加不必要的复杂性和开销。

结语

通过本文的介绍，相信你已经对在Vue 3应用中实现路由传参有了一定的了解。无论是从一个页面传递参数到另一个页面，还是在同一个页面展示不同的内容，都可以通过Vue Router提供的路由传参功能来实现。