不同页面间进行参数传递,实现方式有很多种,最简单最直接的方式就是在页面跳转时通过路由传递参数,如下所示。
路由传递参数
this.$router.push({
name: '跳入页面',
params: {
pid: pid,
}
})
实现方式如上所示,利用router.push方法可以从当前页面跳入指定的页面,跳入的页面通过name属性来确定。name属性里面的内容是在路由routes中定义的。如下所示:
const routes = [{
path: '/login',
component: Login,
name: '跳入页面'
}]
参数通过params属性来传递,如上例中传递了一个pid的参数给页面Login。
路由传递参数好处是简单方便、不占用系统内存。但有个缺点是无法保存传递过来的参数,当刷新页面后,参数遗失。
vuex传递数据
vuex是一个专为Vue.js应用程序开发的状态管理模式,采用集中式存储管理应用的所有组件的状态。在使用vuex之前需要安装,index.js引入vuex代码如下:
import Vue from 'vue'
import Vuex from 'vuex'
import store from './vuex/store'
Vue.use(Vuex)
new Vue({
el: '#app',