vue同一组件视图 点击不同路由 渲染不同img图片

最终效果：

 组件所有代码：

<template>
    <div class="detailsBox">
        <div class="detailsLeft">
            <div class="produbox">
              <img :src="getUrl">
              <ul>
                <!--点击路由视图在当前页面跳转 tag="li" 将此标签变为xx元素-->
                <router-link active-class="active" :to="{path:'/details/'+nav.tag}" :key="index" tag="li" v-for="(nav,index) in detailsnav">{{ nav.tit}}</router-link>
              </ul>
            </div>
        </div>
      <div class="detailsRight">
        <router-view></router-view>
      </div>
    </div>
</template>

<script>
    export default {
        name: "details",
      data(){
          return{
            detailsnav:[
              {
                tit:"开放产品",
                tag:"earth"
              },
              {
                tit:"品牌营销",
                tag:"loud"
              },
              {
                tit:"使命必达",
                tag:"car"
              },
              {
                tit:"勇攀高峰",
                tag:"hill"
              },
            ],
            //组件动态获取的图片要require出去
            imgUrl:{
              "/details/earth":require("../assets/images/1.png"),
              "/details/loud":require("../assets/images/2.png"),
              "/details/car":require("../assets/images/3.png"),
              "/details/hill":require("../assets/images/4.png")
            }
          }
      },
      computed:{
          getUrl(){
            //获取页面路径
            //console.log(this.$route.path);
            return this.imgUrl[this.$route.path];
          }
      }
    }
</script>

<style scoped>
  .detailsBox{
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    padding-top: 20px;
  }
.detailsLeft{
  float: left;
  width: 200px;
  text-align: center;
}
  .produbox{
    background: #fff;
    padding: 20px 0;
  }
  .produbox ul {
    margin-top: 20px;
  }
  .produbox li {
    text-align: left;
    padding: 10px 15px;
    cursor: pointer;
  }
  .produbox li.active,
  .produbox li:hover {
    background: #4fc08d;
    color: #fff;
  }
</style>

重点：

1.   router-link添加一个path属性 拼接一个动态路由

:to="{path:'/details/'+nav.tag}"

2. 将path的动态路由作为动态img的键

imgUrl:{

"/details/earth":require("../assets/images/1.png"),

"/details/loud":require("../assets/images/2.png"),

"/details/car":require("../assets/images/3.png"),

"/details/hill":require("../assets/images/4.png")

}

3. 给img绑定一个计算属性

<img :src="getUrl">

computed:{

     getUrl(){

//获取页面路径

//console.log(this.$route.path);

    return this.imgUrl[this.$route.path];

}

}