vue 实现点击切换不同页面的两种方法

亦凉 2023-07-09 13:29 9阅读 0赞

## 第一种 ##

<template>
      <div class="nav-wrapper">
        <div class="logo-wrapper">
          <div class="img-wrapper">
            <img src="http://tpl-c913457.pic-tpl.websiteonline.cn/upload/f01_fxby.png" width="70px"
            height="45px">
          </div>
          <span>梦幻马卡龙</span>
        </div>
        <div class="nav-header">
          <ul>
            <li @click="switchTo('/')">
              <span :class="{on: '/' === $route.path}">首页</span>
            </li>
            <li @click="switchTo('/company')">
              <span :class="{on: '/company' === $route.path}">公司简介</span>
            </li>
            <li @click="switchTo('/news')">
              <span :class="{on: '/news' === $route.path}">新闻动态</span>
            </li>
            <li @click="switchTo('/sweets')">
              <span :class="{on: '/sweets' === $route.path}">美食甜品</span>
            </li>
            <li @click="switchTo('/users')">
              <span :class="{on: '/users' === $route.path}">用户留言</span>
            </li>
            <li @click="switchTo('/contact')">
              <span :class="{on: '/contact' === $route.path}">联系我们</span>
            </li>
          </ul>
        </div>
        <div class="nav-bottom">
          <span>流通事业部09年度营销会胜利召开</span>
          <span>总经理**在2020新品订货会上致欢迎词</span>
          <span>小食事业部正式转为流通事业部</span>
        </div>
      </div>
    </template>
    
    <script>
    export default { 
      methods: { 
        switchTo (path) { 
          this.$router.replace(path)
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
    .nav-wrapper { 
      width: 80%;
      height: 165px;
      margin: 10px auto;
      .logo-wrapper { 
        width: 17%;
        height: 125px;
        float: left;
        .img-wrapper { 
          padding-top: 40px;
          padding-left: 80px;
        }
        span { 
          font-size: 18px;
          color: rgb(246, 165, 159);
          padding-left: 70px;
        }
      }
      .nav-header { 
        height: 125px;
        ul { 
          height: 40px;
          display: flex;
          padding-top: 50px;
          li { 
            width: 150px;
            display: inline-block;
            justify-content: space-around;
            text-align: center;
            line-height: 40px;
            .on{ 
              color:rgb(246, 165, 159)
            }
          }
          li:hover { 
            color:rgb(246, 165, 159);
          }
        }
      }
      .nav-bottom { 
        padding-left: 80px;
        line-height: 40px;
        color: aliceblue;
        font-size: 12px;
        background-color: #f6a59f;
      }
    }
    </style>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70]

## 第二种 ##

<template>
      <div class="tool-bar">
        <div
          class="tool-bar-item"
          v-for="(item, index) in toolBarData"
          :key="index"
          @click="onChangeFragement(item, index)"
        >
          <img
            class="tool-bar-item-img"
            :src="[index === selectItemIndex ? item.hIcon : item.nIcon]"
          />
          <div
            class="tool-bar-item-name"
            :class="{'tool-bar-item-name-h' : index === selectItemIndex}"
          >
            { { item.name}}
          </div>
        </div>
      </div>
    </template>
    
    <script>
    export default { 
      data() { 
        return { 
          toolBarData: [
            { 
              // 这个是 vue 里面配置的别名，只要路径正确即可
              nIcon: require("@img/home-n.svg"),
              hIcon: require("@img/home-h.svg"),
              name: "首页",
              componentName: "home",
            },
            { 
              nIcon: require("@img/shopping-n.svg"),
              hIcon: require("@img/shopping-h.svg"),
              name: "购物车",
              componentName: "shopping",
            },
            { 
              nIcon: require("@img/my-n.svg"),
              hIcon: require("@img/my-h.svg"),
              name: "我的",
              componentName: "my",
            },
          ],
          selectItemIndex: 0,
        }
      },
      methods: { 
        onChangeFragement(item, index) { 
          this.selectItemIndex = index
          this.$emit('onChangeFragement', item.componentName)
        }
      },
    }
    </script>
    
    <style lang="scss" scoped>
    .tool-bar { 
      width: 100%;
      height: px2rem(46);
      display: flex;
      justify-content: space-around;
      background-color: #fff;
      box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.2);
      border-top: 1px solid #e5e5e5;
    
      &-item { 
        text-align: center;
        padding: px2rem(4) px2rem(12);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    
        &-img { 
          width: px2rem(22);
          height: px2rem(22);
        }
    
        &-name { 
          font-size: 14px;
          margin-top: px2rem(4);
    
          &-h { 
            color: #d81e06;
          }
        }
      }
    }
    </style>

（里面的 px2rem() 是为了做适配设置，  
配置方法可以看这篇文章[https://blog.csdn.net/qq\_43477721/article/details/108235590][https_blog.csdn.net_qq_43477721_article_details_108235590]）  
（如果不想这样配置，可以将 px2rem() 这个函数里面的值提取出来，加上 px 就可以使用了，）

###### 调用组价处 ######

<template>
      <div class="main">
        <component :is="curentComponent"></component>
        <toolBar @onChangeFragement="onChangeFragement"></toolBar>
      </div>
    </template>
    
    <script>
    import toolBar from '@c/currency/ToolBar.vue'
    export default { 
      components: { 
        toolBar,
        'home': () => import('@c/Home'),
        'shopping': () => import('@c/Shopping'),
        'my': () => import('@c/My')
      },
      data() { 
        return { 
          curentComponent: 'home'
        }
      },
      methods: { 
        onChangeFragement(componentName) { 
          this.curentComponent =componentName
        }
      },
    }
    </script>
    
    <style lang="scss" scoped>
    .main { 
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    </style>

![在这里插入图片描述][2020082619335611.gif_pic_center]

关注公众号：大明贵妇，无套路获取前端学习资料，期待各位客官来临  
![在这里插入图片描述][20201130105458677.jpg_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200229085401800.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_qq_43477721_article_details_108235590]: https://blog.csdn.net/qq_43477721/article/details/108235590
[2020082619335611.gif_pic_center]: https://img-blog.csdnimg.cn/2020082619335611.gif#pic_center
[20201130105458677.jpg_pic_center]: https://img-blog.csdnimg.cn/20201130105458677.jpg#pic_center