vue vue-router传参，v-for与v-if结合遍历显示该参数对应的内容

问题描述：接着上一篇的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'}
             ]

    }

      内容：

     

{{operate.name}}
       
 

 

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

    内容：

     

$route.params.id==i.id">
       我是路由{{i.id}}


   

   数据：

      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获取的内容是一个字符串，故比较的时候应该用同类型数据相比，要么比的对象转化成字符串类型，要么比的对象就是字符串类型。