Vue中页面跳转的传递和获取参数详解

Vue 是一个 MVVM 框架，它是以组件化的方式开发 SPA，因此页面之间的跳转是非常常见的操作。而在实际开发中，页面之间的数据传递也是非常常见的需求，比如需要把某个页面的数据传递给下一个页面进行处理等等。本文将从以下几个方面详细阐述 Vue 中页面跳转传递和获取参数的方法。

一、通过$route.params 来传递参数

在 Vue 中，我们可以使用$route 来获取当前路由信息，而$route.params 即为当前路由所传递的参数。我们可以在当前路由的path中添加参数，例如:

{
    path: '/example/:id',
    component: Example
}

在上述代码中，我们在path中设置了一个:id，这个 id 就是我们要传递的参数名称。在 Example 组件中，我们可以使用$route.params.id来获取这个参数：

export default {
    mounted() {
        console.log(this.$route.params.id);
    }
}

在上述代码中，我们通过 mounted 钩子获取当前路由的参数，然后打印出来。当我们访问这个路由时，例如访问/example/1，控制台将会输出 1。

二、通过 query 来传递参数

在 Vue 中，我们还可以使用query来传递参数。与$params 不同的是，$query是以键值对的形式传递参数。我们可以在路径中添加?和参数名称=参数值，例如：

{
    path: '/example',
    component: Example
}

在上述代码中，我们没有为path添加参数。在 Example 组件中，我们可以通过this.$route.query来获取参数：

export default {
    mounted() {
        console.log(this.$route.query.name);
    }
}

在上述代码中，我们通过mounted钩子获取当前路由的参数，然后打印出来。当我们访问这个路由时，例如访问/example?name=Tom，控制台将会输出 Tom。

三、通过 props 传递参数

除了路由传参之外，我们还可以通过props来传递参数。这种方式比较适用于子组件和父组件之间的参数传递。我们可以在父组件中通过props来传入参数，例如：

    
<script>
    import ChildComponent from 'child-component';
    export default {
        data() {
            return {
                title: 'Hello Vue'
            }
        },
        components: {
            ChildComponent,
        }
    }
</script>

在上述代码中，我们通过:title="title"传递了title参数给子组件。在子组件中，我们需要在props中声明接收这个参数：

<script>
    export default {
        props: {
            title: {
                type: String,
                required: true,
             }
        }
    }
</script>

在上述代码中，我们声明了props中必须要有一个title参数，它的类型是 String 类型。我们可以在模板中使用这个参数渲染页面。

四、通过 vuex 来传递参数

最后一种方式是通过 Vuex 来传递参数。如果我们需要在多个组件之间共享数据，我们可以使用 Vuex。在 Vuex 中，我们可以使用 state 来存储共享的数据，使用mutations来修改数据。在需要用到这些数据的组件中，我们可以使用getters来取到这些数据。

这里我们简要介绍一下Vuex的基本用法。我们需要在 src 目录下创建一个 store.js 文件，然后在这个文件中初始化一个store：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
    state: {
        count: 1
    },
    mutations: {
        add(state) {
            state.count++;
        }
    },
    getters: {
        getCount: state => state.count
    }
})
export default store;

在上述代码中，我们初始化了一个Vuex的store，并声明了一个state.count的值和一个mutations.add()，用于修改state.count的值。我们还声明了一个getters.getCount()来获取state.count的值。

接下来，在需要用到这些数据的组件中，我们需要引入store，并使用getters来获取数据：

import store from 'store';
export default {
    mounted() {
       console.log(store.getters.getCount);
    }
}

在上述代码中，我们在mounted钩子中获取store的getters.getCount()，然后在控制台中打印出来。在其他需要使用到store中的数据的组件中，我们可以使用类似的方式来获取数据。

五、总结

本文以 Vue 页面跳转传递和获取参数为中心，从不同的角度详细阐述了 Vue 中页面跳转传递和获取参数的方法。页面之间的数据传递在实际开发中经常用到，深入理解 Vue 中页面跳转传递和获取参数的方法，将有助于我们更好的开发 Vue 应用。

以上关于Vue中页面跳转的传递和获取参数详解的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。