Vue循环实现多个div盒子展示和其中button按钮等跳转路径设置

 
​<div>
      <div v-for="item in Arr" :key="item.id">      
         <p>{{item.name}}</p>          
        <button @click="gopage" ><span>查看详情</span></button>    
      </div>
 </div>

​ 

直接在你要循环的盒子上写 v-for=”item in Arr”。在<script>中写Arr数组，给button一个点击事件，当点击button跳转到它相应的页面。

 
​methods:{
       gopage:function () {
         alert(this.Arr[2].url)         
         this.$router.push({ path:this.Arr[2].url })
       }
     }

​ 

一定要注意！path后面如果是单纯不变的路径要加单引号,如

 
​this.$router.push({ path:'@/pages/account/dialog/contact' })

​ 

还要注意，你要跳转的页面，一定要在你的index.js中配置过的。如:

 
​ {
           path: 'contact',
           name: 'contact',
           component:  
      resolve => require(['@/pages/account/dialog/contact'],resolve),
           meta:{
             title:'联系我们',
             group: 'Dialog'
           }
         } 

​ 

跳转语句还可以这么写，前提是你一定要在路由中写了name

 
​ this.$router.push({name: 'contact'})

最主要的！！如果你的路径是个变量，一定不要加单引号！ 一定不要加单引号！ 一定不要加单引号！ 

说多了都是泪，顺便一提，当你用img的src路径时，当src路径是变量，可能会出现路径解读问题，说undefind，那是因为你的路径第一次解读就被解读成为了字符串，解决方法要加require。如：

 
​<img :src="require(`./img/${item.EnName}.jpg`)" alt="flowers"> 
在其他地方引用也要写成require(`./img/${item.EnName}.jpg`)。

最后帖一下我的代码

 
 
​<style>
  .solve_flex{
     display: flex;
     justify-content:space-around;
     align-items:center;
     padding-top: 20px;
     width: 100%;
     height: 516px;   }
   .module_smallbox{
   width: 360px;
   height: 410px;
   background: red; }
   .solve_span{
     font-family:PingFangSC-Regular;
     font-size:20px;
     color:#333333;
     text-align:left;   }
   .home_onebutton span{
     font-family:PingFangSC-Regular;
     font-size:14px;
     letter-spacing:0.59px;   }
   .home_onebutton:hover{
     color: #0b85ef;
     border-color: #0b85ef;
     transition: all 0.3s;   }
 </style>

​ 

上面是CSS

​  
​<template> 
<div class="solve_flex">
         <div class="module_smallbox"
 v-for="(item,index) in Arr" :key="item.id">
           <p class="solve_span ml25 mt30">{{item.name}}</p>               <button class="home_onebutton mt15 ml25"><span>查看详情</span></button>
         </div>
       </div>
 </template> 
<script>
   export default {
     name: 'home',
     data () {
       return {
         Arr:[
           {id:1,name:"整套区块链解决方案",url:"/Privacy/contact"},           {id:2,name:"多链云钱包解决方案",url:"/Privacy/contact"},           {id:3,name:"智能合约工具",url:"/Privacy/contact"}]
       }
     },
     created() {
     },
     methods:{
       gopage:function () {
         alert(this.Arr[2].url)
         this.$router.push({ path:this.Arr[2].url })
       }
     }
   }
 </script>

​ 

​