问题描述:接着上一篇的router-view来讲,本次主要解决的是获取地址栏的http://localhost:8081/#/HelloWorld/engine/2中的参数id的值:2,怎样通过2来使用v-for遍历数组中对应的id为2的那一栏数据,注:仅显示id为2的这一项内容。

即通过参数传递过来的值决定最终要显示的数组中的那一项内容。

环境:webpack v-cli

1、基本配置操作

(1)router文件夹下的index.js修改,设置参数id

  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      children:[
            {path:'/HelloWorld/engine/:id',name: 'engine',component:engine}
       ] 
    }

  ]

(2)HelloWorld.vue下的router-link处的path配置,此处是利用循环生成的router-link

      数据data:

navTo:{

    "operate":[
               {"name":"系统1","path":'/header'},
               {"name":"系统2","path":'/HelloWorld/engine/ 1'}
             ]

    }

      内容:

     <p v-for="(operate,path,index) in navTo.operate" class="nav" @click="change(index)">
<router-link :to="{ path: operate.path}">
{{operate.name}}
       </router-link>
  <i class="el-icon-arrow-right right"></i>

 </p>

2、核心内容:router-view即engine.vue的内容配置

    内容:

     <span v-for="i in objectd">
<p v-if="$route.params.id==i.id">
       我是路由{{i.id}}
<br />
   </p>

</span>

   数据:

      objectd:{

     "first":{"id":'1',"name":"john",},
     "second":{"id":'2',"name":"333n",}

     }

3、具体解释,【注意顺序】

    (1) v-for="i in objectd"是遍历了所有objectd中的内容,如若显示是全部的内容,而我们想要的是单独的对应的一项内容,就需要判断条件,来过滤那些不需要的数据。

     (2)v-if="$route.params.id==i.id"就是获取地址栏的路由路径中的参数id,通过与遍历结果中的id相比,相同则显示对应的内容,不同则不显示这部分内容。

     (3){{i.id}}的位置至关重要,放在v-if中就只显示满足的那一项的内容,放在v-if前面就是所有的内容。

4、注意事项

    $route.params.id获取的内容是一个字符串,故比较的时候应该用同类型数据相比,要么比的对象转化成字符串类型,要么比的对象就是字符串类型。  

Logo

前往低代码交流专区

更多推荐