vue store 和router

store

//store 
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
      isBlack:false,  //定义中心数据
  },
  mutations: {//变更state
    storeIsBlack(s, p) { 
        s.isBlack = p;
    },
  },
  actions: {
  },
  modules: {
  }
})

其他组件更改store中心数据

app.vue
...//
created() {
      //通过stroe 下面mutations 的方法storeIsBlack更改isBlack
      this.$store.commit('storeIsBlack',true); 
 },
..//

test.vue组件获取state的数据this.$store.state.isBlack;

  test.vue
  <template>
  <div id="Ml" :class="isBlack?'black':''">
    {{$store.state.isBlack}} //这里可以直接接收store 下面的isBlack的内容 
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: "VipClassExplain",
  data() {
    return {
      isBlack: false,
    }
  },
  created() {
      //这里也可以接收store 下面的isBlack的内容 赋值给data
      this.isBlack = this.$store.state.isBlack; 
  },
  mounted() { }, //钩子函数
  components: {},
  methods: { //方法
    test(){
    }
}
</script>

router 三步走

1.创建vue组件例如one.vue
2.router.js 引入one.vue

//->>>>>>router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
// import twofrom '../views/two.vue'    //普通路由  引入页面路径
Vue.use(VueRouter)

const routes = [      //普通路由和缓存路由
   /*普通路由  需要在上边定义引入页面路径*/
    //   {            
    //     path: '/two',
    //     name: 'two',  
    //     component: two
    //   },
     /*缓存路由*/
    {  
        path: '/one',
        name: 'one',
        component: () => import( /* webpackChunkName: "about" */ '../views/one.vue'),
    },

]

const router = new VueRouter({
    //   mode: 'history',  //路由模式
    base: process.env.BASE_URL,
    routes
})

export default router

通过this.$router.push({ name: "two" })跳转
或者使用<router-link :to="/test">跳转</router-link>
传参<router-link :to="{path:'/test',query: {name: id}}">跳转</router-link>(id是参数)

router传参有几种方式

this.$router.push({ name: "two", params: { payId: 1234 } })
this.$router.push({ name: "two", query : { payId: 1234 } })
this.$router.push({ path: "two", query : { payId: 1234 } })
this.$router.push({ path: "two", params: { payId: 1234 } }) 数据会丢失,不可用
$\color{ red } {name可以搭配params或query }$
$\color{ red } {path只可以搭配query }$
$\color{ red } {特别注意：params这种方式传递的参数，如果在目标页面刷新是会丢失参数的url看不见 }$
$\color{ red } {特别注意：query 这种方式传递的参数，刷新页面数据不会丢失，数据会拼接在url被看见 }$

方法（）{
 
    this.$router.push({ name: "two", params: { payId: 1234 } })  //刷新页面数据会丢失
    this.$router.push({ name: "two", query : { payId: 1234 } })  //刷新页面数据不会丢失  但是参数会拼接在url上
}

//--->>>two.vue
  //$route 不是$router  没有r
跳转到two页面通过`this.$route.params.payId` 来接收使用
跳转到two页面通过`this.$route.query.payId` 来接收使用

二者区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示

最后编辑于：2020.06.30 15:35:54