vue router-link 动态传值

1、路由配置：

 1 export default new Router({
 2      routes: [
 3          {
 4              path: '/details/:id',
 5              name: 'details',
 6              component: Details
 7          }
 8      
 9        ]
10  })

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

 1  export default new Router({ 
 2      routes: [
 3          {
 4              path: '/details',
 5              name: 'details',
 6              component: Details
 7          }
 8      
 9        ]
10  })

 

2、循环遍历出数据：

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

 

3、子组件接收参数：

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

 

转载于:https://www.cnblogs.com/hexuejuan/p/8044046.html