Vue2 steam移动端作品介绍

最新推荐文章于 2023-03-01 08:23:54 发布

走，我们去抽风

最新推荐文章于 2023-03-01 08:23:54 发布

阅读量660

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/LittleWhiteCode6/article/details/127172632

版权

思路

主要使用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">&lt;&nbsp;回到首页</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>