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跳转到它相应的页面。

<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() {

    }
</script>

这里就已经实现了循环实现多个div，你想要多少个，在Arr里面继续加就行。

接下来开始写gopage函数

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>

最后参考了https://blog.csdn.net/oXiangZuoZuo12345/article/details/81418954?utm_source=blogxgwz3