页面之间的逻辑跳转+vuex的初步使用--仅供自身记录使用

在做项目前需要充分考虑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 参数都要传递，在第一次做的时候处理完善

 

 

 

 

 这里可以有偿帮你直接解决bug，我的微信号18062748486；如加微信，请备注“Bug 解决”