[vue] 动态加载图片和页面跳转

最新推荐文章于 2024-04-09 14:42:37 发布

原创最新推荐文章于 2024-04-09 14:42:37 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

本文介绍了在Vue项目中实现动态加载图片和页面跳转的两种方法。对于动态加载图片，提供了两种实现方式；在页面跳转方面，详细讲解了如何根据图片点击实现不同页面的跳转，以及使用`@click`结合`this.$router.push`进行自定义页面跳转的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态加载图片的方法

方法一：

<el-carousel-item v-for="item in imgList" :key="item.id">
    <img :src="item.img" alt="图1" />
</el-carousel-item>

data(){
    return {
        imgList: [
        {
          id: 1,
          img: require("../../assets/images/picture1.png"),
          pathUrl: "/pictures",
         },
        ]
    }
}

方法二：

<div class="item_img" v-for="item in imgList" :key="item.id">
    <img :src="require(`@/assets/images/${item.img}`)" alt="" />
</div>

data() {
    return {
      imgList: [
        { id: 1 ,img: "picture1.jpg", name: "图1" },
      ]
    };
  }

页面跳转的方法

方法一：点击每张图片跳转的页面都不一样

<el-carousel-item v-for="item in imgList" :key="item.id">
    <router-link :to="item.pathUrl" tag="div">
        <div>
            <img :src="item.img" alt="" />
        </div>
    </router-link>
</el-carousel-item>

data(){
    return {
        imgList: [
        {
          id: 1,
          img: require("../../assets/images/picture1.png"),
          pathUrl: "/pictures1",
         },
         {
          id: 2,
          img: require("../../assets/images/picture1.png"),
          pathUrl: "/pictures2",
         },
        ]
    }
}

方法二：

@click="自定义跳转的方法名"

自定义跳转的方法名(){this.$router.push("跳转的页面")

<img src="../assets/logo.png" alt="logo" @click="toHome" />

methods:{
    toHome() {
      this.$router.push("homeMain");
    },
}

注：记录只为了加深记忆，若有问题请大家不吝赐教，愿大家学有所成