在做项目前需要充分考虑2点:
1 .对业务逻辑的整体把握,理论上一般而言,进入新的页面数据都是返回的空的数组,那么所有的数据逻辑是如何一步步串联起来的需要非常清楚:
2. 以及页面之间的逻辑跳转: 关于逻辑跳转就要用到传参:一般用到路由传参,以及vuex
本文主要我的理解什么时候用vuex,什么时候路由传参;
vuex:
对于全局需要用到的变量,或者从原生传过来的参数可以用vuex;
http://localhost:8088/#/home?romTag= 5&authorityNum=5
这个参数是从原生传进来的;建议用vuex
vuex 的使用方法:
1.安装 npm i vuex --save
2.在main.js 中
import store from './store'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
在src 下新建文件夹 store 里面创建一个index.js
import Vue from 'vue'
import Vuex from 'vuex'
//挂载Vuex
Vue.use(Vuex)
//创建VueX对象
const store = new Vuex.Store({ //注意Store要大写
//state 中设置的全局访问的state对象,
state:{
authorityNum:0,
fromTag:1, //可以设置的初始属性值
},
//更改vuex的store中状态的唯一方法,通过提交mutation修改状态
mutations:{
getAuthorityNum (state,payload){
state.authorityNum = payload
},
getFromTag(state,payload){
state.fromTag = payload
},
}
})
export default store
3.把获取到的值,注入到vuex 上面;就可以改变对应的vuex 里面的值,用commit 方法
this.fromTag = this.$route.query.fromTag; //从那个模块的入口建议加上
if (this.fromTag != undefined) {
this.$store.commit('getFromTag', this.$route.query.fromTag)
this.$store.commit('getAuthorityNum', this.$route.query.authorityNum)
}
这里只用道理 vuex 里面的 state mutations 之后会用到 getter action Module
下面上一张图 和一个链接对vuex 的会有更好的理解:
https://www.cnblogs.com/xihao/p/11420884.html (参考博文 kevin_峰 的理解)
第二部分:
关于路由传参的,针对页面中某个list 的某一行的跳转问题:
第一种:params
this.$router.push({
name: 'detailModel',
params: {
modelID: modelID,
modelName:modelName,
}
})
获取路由参数:
this.planId = this.$route.params.planId;
第二种:query
this.$router.push({
path: '/particulars',
query: {
id: id
}
})
获取路由参数:
this.$route.query.id
在处理页面的时候一定注意跳转参数的传递问题:
跳转不出问题的话,原页面created 参数都要传递,在第一次做的时候处理完善