4-8 vue-router路由传值的两种方法

海通社区重构

涉及到路由传值,还是官方文档管用
Vue-Router编程式的导航

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
注意:如果提供了 path,params 会被忽略,上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的 name 或手写完整的带有参数的 path:

至于理解的话,可以理解为跟session和状态管理工具一样的全局变量,只不过非常明显,容易取值和维护。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3的不同页面之间传递数据通常涉及使用 Vue Router 进行路由管理,并利用 Vuex 或者 Composition API 的上下文提供全局状态管理。下面是这两种方法的具体说明: ### 使用 Vuex **原理及步骤**: 1. **安装 Vuex**: 首先需要安装 Vuex,通过 `npm install vuex` 或 `yarn add vuex` 来安装。 2. **创建 Vuex Store**: 创建 Vuex store 文件(例如 `store/index.js`),并在其中定义 state、mutations、actions 和 getters。 ```javascript import { createStore } from 'vuex'; export default createStore({ state: { sharedData: '', }, mutations: { setSharedData(state, payload) { state.sharedData = payload; }, }, actions: { updateSharedData({ commit }, payload) { commit('setSharedData', payload); }, }, getters: { getSharedData: (state) => state.sharedData, }, }); ``` 3. **配置路由并挂载 Vuex**: 在 `router/index.js` 中引入 Vuex 实例并将其作为全局服务使用。 ```javascript import Vue from 'vue'; import Vuex from 'vuex'; import router from './router'; // 其他导入... Vue.use(Vuex); const store = new Vuex.Store({ // Vuex store 定义... }); new Vue({ router, store, render: (h) => h(App), }).$mount('#app'); ``` 4. **在组件间传递数据**: - 在接收数据的组件中,可以监听 Vuex store 的变化,或者直接访问 store 中的数据。 - 在更新数据的组件中,使用 `this.$store.dispatch` 调用 action 来触发 Vuex 中的操作,然后由 action 触发 mutation 来修改 state。 5. **使用 computed 或者 methods 访问数据**: 可以在组件内使用 Vuex store 的 getters 获取共享数据。 ### 使用 Composition API **原理及步骤**: 1. **引入 Composables**: 引入 Vuex 依赖项 `useStore` 以及 `defineStore` 函数来简化状态管理。 2. **创建 Composable**: 使用 `createStore` 函数定义 store,然后在组件中使用 `useStore` 提供的 Composable 函数来获取或设置共享数据。 ```javascript import { defineStore } from "pinia"; const useGlobalState = defineStore("globalState", { state: () => ({ sharedData: "", }), getters: { getData: (state) => state.sharedData, }, actions: { setData(data) { this.state.sharedData = data; }, }, }); ``` 3. **在组件中使用 Composable**: 在需要使用共享数据的组件中,使用 `useStore()` 函数引用 store,并通过 `mapGetters` 或 `mapActions` 来映射 getters 和 actions 到组件的计算属性或方法。 ```html <template> <!-- 使用 computed 属性 --> {{ globalState.getData }} <!-- 使用方法 --> <button @click="updateData">Update Data</button> </template> <script setup lang="ts"> import { useGlobalState } from "../stores/globalState"; import { onMounted } from "vue"; const globalState = useGlobalState(); const updateData = () => { globalState.setData("new value"); }; onMounted(() => { console.log(globalState.getData); // 初始化时调用 getters 获取数据 }); </script> ``` 以上就是 Vue3 不同页面间传递数据的基本方法,无论是通过 Vuex 还是使用 Composition API,都可以有效地实现在应用中的全局状态管理和数据通信。在选择使用哪种方法时,可以根据项目的大小、复杂度和个人偏好来决定。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值