思路
主要使用Vuex和路由知识，进行多页面跳转并且多个路由信息共享。
根据不同的信息，显示不同内容
使用query在路由跳转时传数据
进行购买，加入购物车等操作时，使用Vuex的$store传数据
网页内容
代码
路由配置地址
import VueRouter from 'vue-router'
import HomePage from '../components/rootes/HomePage.vue'
import CuXiaoPage from '../components/rootes/CuXiaoPage.vue'
import PersonPage from '../components/rootes/PersonPage.vue'
import MessagePage from '../components/rootes/MessagePage.vue'
import GamePage from '../components/rootes/GamePage.vue'
import CollectionPage from '../components/rootes/CollectionPage.vue'
import PurchasedPage from '../components/rootes/PurchasedPage.vue'
import HistoryPage from '../components/rootes/HistoryPage.vue'
import SearchPage from '../components/rootes/SearchPage.vue'
export default new VueRouter({routes: [{path: '',redirect: '/HomePage'},{path: '/HomePage',component: HomePage}, {path: '/CuXiaoPage',component: CuXiaoPage}, {path: '/PersonPage',component: PersonPage}, {path: '/MessagePage',component: MessagePage}, {path: '/GamePage',component: GamePage}, {path: '/CollectionPage',component: CollectionPage}, {path: '/PurchasedPage',component: PurchasedPage}, {path: '/HistoryPage',component: HistoryPage}, {path: '/SearchPage',component: SearchPage}]
})Vuex数据
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)//响应组件中的动作
const action = {}//准备mutations用于操作数据
const mutations = {}
const state = {news: [{content: '扣鸡摸头！赛600,鸭猴！',zan: '赞',cai: '踩',num: 1}],nums: 1,zanshu: 0,caishu: 0,searchresult: [],tags: 1,games: [{gamename: 'UNIVERIM',address: 'ceping1.jpg',introduce: '《狙击手幽灵战士契约2》的背景在中东，是一款现代战争战术类射击游戏。在游戏中，玩家扮演代号渡鸦的契约狙击手刺客，在激动人心的单人战役中消灭一连串目标。你将在超过1000米的超远距离外狙杀目标，准备好体验系列中最刺激人心的一作吧',ispay: 0,iscollection: 0,number: 1}, {gamename: 'BeamNgdrive',address: 'ceping2.jpg',introduce: '《地狱门,Gates of Hell》是一款第一人称视角恐怖动作游戏，在穿越地狱之门后你无处躲藏，面对恐怖的恶魔，鲜血淋漓的丧尸，变异的人类，黑暗的巫师，活泼的头骨和巨大的BOSS，继续前进，寻找强大的天使与恶魔装备，并尽可能长地活下去。',ispay: 0,iscollection: 0,number: 2}, {gamename: 'PAYDAY',address: 'ceping3.jpg',introduce: '在这个游戏中建立自己的王国，并简单地管理其资源。 欢迎光临我的年轻的国王，占有你的新帝国。 许多挑战你attendent.Votre英雄将探索世界，但要注意，这个世界是危险的，你必须带领你的士兵在执行这一新的土地的权利。',ispay: 0,iscollection: 0,number: 3}, {gamename: '征服之歌',address: 'ceping4.jpg',introduce: '您的终极地平线冒险正等着您展开！探索墨西哥充满活力且不断变化的开放世界景色，驾驶百辆世界级好车，享受无拘无束又有趣的驾驶体验。立即展开您的地平线冒险并将本游戏添加到您的愿望列表吧',ispay: 0,iscollection: 0,number: 4}, {gamename: 'XCOM2',address: 'kaifa1-1.jpg',introduce: '您的终极地平线冒险正等着您展开！探索墨西哥充满活力且不断变化的开放世界景色，驾驶百辆世界级好车，享受无拘无束又有趣的驾驶体验。立即展开您的地平线冒险并将本游戏添加到您的愿望列表吧',ispay: 0,iscollection: 0,number: 5}, {gamename: '为了吾王',address: 'kaifa2-1.jpg',introduce: '《狙击手幽灵战士契约2》的背景在中东，是一款现代战争战术类射击游戏。在游戏中，玩家扮演代号渡鸦的契约狙击手刺客，在激动人心的单人战役中消灭一连串目标。你将在超过1000米的超远距离外狙杀目标，准备好体验系列中最刺激人心的一作吧',ispay: 0,iscollection: 0,number: 6}, {gamename: 'JEDI',address: 'kaifa3-1.jpg',introduce: '在这个游戏中建立自己的王国，并简单地管理其资源。 欢迎光临我的年轻的国王，占有你的新帝国。 许多挑战你attendent.Votre英雄将探索世界，但要注意，这个世界是危险的，你必须带领你的士兵在执行这一新的土地的权利。',ispay: 0,iscollection: 0,number: 7}, {gamename: 'DEAD CELLS',address: 'kaifa4-1.jpg',introduce: '在这个游戏中建立自己的王国，并简单地管理其资源。 欢迎光临我的年轻的国王，占有你的新帝国。 许多挑战你attendent.Votre英雄将探索世界，但要注意，这个世界是危险的，你必须带领你的士兵在执行这一新的土地的权利。',ispay: 0,iscollection: 0,number: 8}],gamedetails: {gamename: '',address: '',introduce: '',ispay: 0,iscollection: 0},record: [],searchgame: []
}
export default new Vuex.Store({action,mutations,state
})主页
<template><div id="HomePage"><SteamSearch style="margin-top: 100px;"></SteamSearch><JingXuan style="margin-top: 20px;"></JingXuan><TeJia style="margin-top: 30px;"></TeJia><PageBottom></PageBottom></div>
</template><script>
import SteamSearch from '../SteamSearch.vue'
import JingXuan from '../JingXuan.vue'
import TeJia from '../TeJia.vue'
import PageBottom from '../PageBottom.vue'
export default {name:'HomePage',components:{SteamSearch,JingXuan,TeJia,PageBottom
},methods:{}
}
</script><style></style>游戏内容页面
<template><div id="GamePage"><div id="fanhui"><span><router-link to="/HomePage">< 回到首页</router-link></span></div><div id="tupian"><img :src="require(`@/assets/${this.$store.state.games[$route.query.n-1].address}`)" alt=""></div><h1>{{this.$store.state.games[$route.query.n-1].gamename}}</h1><div id="jieshao">{{this.$store.state.games[$route.query.n-1].introduce}}</div><div id="caozuo"><a @click="suocang(1)" v-show="this.$store.state.games[$route.query.n-1].iscollection==0">收藏</a><a @click="suocang(0)" v-show="this.$store.state.games[$route.query.n-1].iscollection==1">已收藏</a><a @click="goumai(1)" v-show="this.$store.state.games[$route.query.n-1].ispay==0">购买</a><a v-show="this.$store.state.games[$route.query.n-1].ispay==1">已购买</a></div></div>
</template><script>
export default {name:'GamePage',methods:{suocang(value){this.$store.state.games[this.$route.query.n - 1].iscollection=value},goumai(value){this.$store.state.games[this.$route.query.n - 1].ispay = value},},beforeCreate() {if (this.$store.state.record.length - 1 <0||this.$route.query.n - 1 != this.$store.state.record[this.$store.state.record.length-1].num){this.$store.state.record.push({ num: this.$route.query.n - 1, address: this.$store.state.games[this.$route.query.n - 1].address })}},
}
</script><style>
#GamePage{position: relative;margin-top: 180px;
}
#GamePage>h1{color: #fff;margin-top: 10px;
}
#jieshao{color: #fff;margin-top: 20px;
}
#fanhui{position: fixed;padding-top: 20px;width: 100%;top: 80px;height: 70px;background-color: rgb(36, 35, 35);
}
#fanhui>span{float: left;padding-left: 15%;font-size: 30px;line-height: 30px;
}
#fanhui>span>a{color: #fff;
}
#caozuo{margin-top: 20px;
}
#caozuo>a{display: inline-block;background-color: rgb(36,35,35);width: 100px;height: 50px;color: #fff;margin-top: 20px;margin-left:20px;line-height: 50px;font-size: 20px;
}
</style>
