vue簡單的v-for - - 路由跳轉

前幾天寫了一個特特特簡單的小圖片頁面，主要用到的就是v-for遍歷以及路由跳轉到詳情頁。路由跳轉需要在router文件夾下index.js引入。

導航欄（element ui導航欄為模板）：

    <el-header>
      <div class="nav-menu">
        <el-menu
          class="el-menu"
          mode="horizontal"
          router="true"
                 >
          <el-menu-item class="menu-item" v-for="list in menuData" :key="list" :index="list.href">{{list.title}}</el-menu-item>
        </el-menu>
      </div>
    </el-header>

頁面圖片（理解為盒子里面加張圖，圖里有個跳轉---下面圖片描述也加一個跳轉，此處可有多種方法實現跳轉。）

    <el-main>
      <div class="all-list">
        <div class="list-box">
          <div class="card-box" v-for="cardBox in boxData" :key="cardBox">
            <div class="card-img">
              <a href="javascript:void(0);" @click=routeTo(cardBox)><img :src="cardBox.img"></a>
            </div>
            <div class="card-info">
              <a href="javascript:void(0);" @click=routeTo(cardBox)>{{ cardBox.title }}</a>
          </div>
          </div>
        </div>
      </div>
    </el-main>

數據寫死在頁面（懶，部分沒有）。，。

data() {
            return {
                menuData:[
                    {title:'首頁', href:'/'},
                    {title:'攝影', href:'/photography'},
                    {title: 'WOW', href:'/wao'}
               ],
                boxData:[
                    {href: '/find',
                    title:'夏日元氣少女',
                    img:require('@/assets/1/1.jpg')
                    },
                    {href: '/Summer',
                        title:'處暑日記',
                        img:"https://i.loli.net/2019/09/09/lJbVpWoG5QN6xHw.jpg"
                    },
                    {title:'聽說',
                        img:require('@/assets/3/3-1.jpg')
                    },
                    {title:'chocolate&vanilla',
                        img:"https://i.loli.net/2019/09/09/DI1OqMxobkzdjcB.jpg"
                    },
                    {title:'QinggHai-girl',
                        img:"https://i.loli.net/2019/09/09/71JyUZxpoWiSsjq.jpg"
                    },
                    {title:'花式腚',
                        img:"https://i.loli.net/2019/09/10/8qy2iZ4cvsbBeuh.jpg"
                    },
                    {title:'向日葵',
                        img:"https://img.zcool.cn/community/03191655d771282a801211d537f5931.jpg@260w_195h_1c_1e_1o_100sh.jpg"
                    }
                ]
            }
        },
        methods:{
            routeTo:function(boxData){
                this.$router.push(boxData.href);
            }

        }
    }

CSS（略），

鏘鏘鏘，。，部分頁面

點擊圖片和字都可以跳轉到詳情頁（部分頁面）。

小梨子和小蘋果也是簡單的路由跳轉，

        <el-button  round type="text" icon="el-icon-pear" class="not-found-btn-gohome" @click="$router.push('/')">首頁</el-button>
        <el-button round @click="$router.go(-1)" icon="el-icon-apple" type="text">返回上一頁</el-button>

姑娘真好看，我可以划着看也可以點着放大看  ==

（圖片來自站酷）感謝~   

完結撒花。