vue simple v-for - - Routing Jump

A few days ago wrote a simple little picture page Te Tete, the main use is v-for traversing the route and jump to the details page. Jump need to introduce in the router routing folder index.js.

Navigation bar (element ui navigation bar as a template):

    <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>

Page images (understood to be inside the box plus Zhang, and FIG has had a jump --- The following description also add a picture to jump, here there are many ways to achieve the jump.)

    <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 coded into the page (lazy, no part). .

Data () {
             return { 
                menuData: [ 
                    {title: ' home page ' , the href: ' / ' }, 
                    {title: ' photography ' , the href: ' / Photography ' }, 
                    {title: ' WOW ' , the href: ' / WAO ' } 
               ], 
                boxData: [ 
                    {the href: ' / Find ' , 
                    title: ' Great strength girls' , 
                    IMG: the require ( ' @ / Assets /. 1 / 1.jpg ' ) 
                    }, 
                    {the href: ' / Summer ' , 
                        title: ' Chushuben diary ' , 
                        IMG: " https://i.loli.net/2019/ 09/09 / lJbVpWoG5QN6xHw.jpg " 
                    }, 
                    {title: ' heard ' , 
                        IMG: the 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:'sunflower',
                        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 (slightly),

Qiang Qiang Qiang. , Part of the page

Click on the image and words can jump to the details page (part of the page).

Small pears and apples are also simple routing small jump,

        <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>

Really nice girl, I can see paddled can also point to see the enlarged ==

(Picture from the station cool) thanks ~   

Sahua end.