vue项目中返回按钮案例(用vuex控制返回按钮的显示或者隐藏)

在vue的项目中避免不了会有返回按钮的出现，恰当的页面，返回按钮的显示或者隐藏，我是用vuex来管理的，

好了，直接上代码吧

<el-button type="primary" @click="returnBtn" v-if="ifshow">返回</el-button>

1.首先要  v-if  条件渲染

2.新建文件store.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

state: {

ifshow: false      //初始值

},

mutations: {

uploadIfshow (state, value) {

state.ifshow = value;

}

}

})

3.在main.js中   记得将store开放出去

import store from './store/store'

new Vue({

router,

store,

render: h => h(App),

}).$mount('#app')

//按钮页面  //ifshow  哪些页面按钮要隐藏

//computed : {

//ifshow () {

//return this.$route.path !== '/home/work'    //例子而已

//}

//},

4.要显示的页面commit提交mutations

this.$store.commit('uploadIfshow',true)

搞定！试试吧！