利用vue-router的动态路由和路由传值实现同一模板渲染不同数据

墨蓝 2022-05-28 09:54 200阅读 0赞

在日常开发中有一种场景非常常见，比如有一百个列表链接，点击链接后进入的页面模板布局都是一样的，只是简单的有些数据不一样，所以在vue中可以利用vue-router的动态路由和路由传值实现，具体如下：

1，在配置模板页面的路由的时候要用动态路由，并开启props模式：

\{  
      path:'/auction\_detail\_index/:id',  
      component:auction\_detail\_index,  
      props: true,  
\},

2，在链接跳转页面要把id传给目标模板页面：

//item.to就是要跳转的模板页面地址，所不同的是需要传iid,由于此是异步加载的数据，需要在接口配置中来配置  
              <a :href="item.to">  
                <img :src="require('../assets/img/project1.png')" alt="">  
              </a>  
            </div>  
          </li>

//接口配置中来配置如下：（/0就是要传的id）

"to":"auction\_detail\_index/0"

这一步配置完后点击就会跳转到同一模板的相应的动态路由页面（比如点击上面的src就会跳转到auction\_detail\_index/0页面，其实是同一模板页面auction\_detail\_index）

3，跳转后需要在auction\_detail\_index页面接收这个传过来的id：

export default \{

//利用props接收id  
  props:\['id'\],  
  created()\{  
    this.$http.get('api/auctions').then(  
        (res)=>\{

//在created钩子函数中利用id获取异步加载的数据  
          let detail\_num=res.data.data.details\[this.id\]  
          console.log(detail\_num)  
          this.detail\_top=detail\_num  
        \},  
        (error)=>\{  
          console.log(error)  
        \}  
      ),

4，接口配置，在配置的时候要配置成数组套数组的模式：（不能写成数组套对象模式）

"auctions":\{  
    "details":\[  
      \[\{  
        "bianhao":"\#000001",  
        "title1":"世纪大战拍卖会专场",  
        "title2":"2020年10月05日 上午10:30-下午6:00"  
      \}\],  
      \[\{  
        "bianhao":"\#000002",  
        "title1":"无以伦比的一次慈善拍卖",  
        "title2":"2020年10月05日 上午10:30-下午6:00"  
      \}\]  
    \]  
  \}

ok到此就实现了同一模板渲染不同数据的效果