Vue路由传值方法详解-使用查询参数-安装并配置Vuex

Vue路由传值方法详解

1. 使用路由参数（params）

1. 定义路由，如 /user/:id。
2. 导航到路由时传入值，如 ``。
3. 在组件内通过 `this.$route.params` 接收值。

2. 使用查询参数（query）

1. 导航到路由时传入参数，如 ``。
2. 在组件内通过 `this.$route.query` 接收值。

3. 通过props传递值

1. 在路由配置中开启 `props: true` 或传递具体值。
2. 组件可以通过 `props` 直接访问传递的值。

4. 使用name传递值

1. 定义路由时给路由起个名字，如 `{ name: 'user', path: '/user/:id' }`。
2. 使用 `` 导航到路由。
3. 组件通过 `$route.params` 获取参数。

5. 通过全局状态管理（如Vuex）传递值

1. 安装并配置Vuex。
2. 在组件中使用Vuex来存取状态。

6. 使用本地存储传递值

1. 设置值：`localStorage.setItem('key', 'value')`。
2. 获取值：`localStorage.getItem('key')`。

建议