vue router-link 动态传值

1、路由配置：

export default new Router({
     routes: [
         {
             path: '/details/:id',
             name: 'details',
             component: Details
         }
     
       ]
 })

如果不想URL中显示出传输的参数，可如下配置：

 export default new Router({ 
     routes: [
         {
             path: '/details',
             name: 'details',
             component: Details
         }
     
       ]
 })

 

2、循环遍历出数据：

<article class="format-standard type-post hentry clearfix" v-for="(val, k) in list.data">
    <header class="clearfix">
        <h3 class="post-title">
            <router-link :to="{name:'details', params: {id: val.id}}">{{ val.title }}</router-link>
        </h3>
    </header>
    <p>{{ val.content }} . . . <router-link class="readmore-link" :to="{name:'details', params: {id: val.id}}">查看更多</router-link></p>
</article>

 

3、子组件接收参数：

var id = this.$route.params.id;