vue2 router-link to
<template> <div> <nv-header></nv-header> <div class="artlist"> <!-- 栏目 --> <ul class="artlistTab clearfix"> <li v-for="(item, index) in itemTab" :class="{'on':initIndex === index}" v-on:click="changeTab(index)">{{item.title}}</li> </ul> <!-- 文章列表 --> <div class="artlistCon"> <router-link v-for="art in artlist" class="artitem clearfix" :to="{name:'article',params:{id:art.id}}"> <router-link class="avatar" href="javascript:void(0);" :to="{name:'userhome',params:{username:art.author.loginname}}"> <img :src="art.author.avatar_url" :alt="art.author.loginname"> </router-link> <div class="art-inf"> <em :title="art.tab | getArticleTab(art.good, art.top)" :class="art.good | getArticleClass(art.top)"> {{art.tab | getArticleTab(art.good, art.top)}} </em> <a class="title">{{art.title}}</a> <span class="rp-count">{{art.reply_count}}/{{art.visit_count}}</span> <span class="last-time">{{art.last_reply_at | getLastTime }}</span> </div> </router-link> </div> <div class="loadingbox" v-show="showLoading"> <div class="loading"></div> </div> </div> <nv-top></nv-top> </div> </template>
<router-link v-for="art in artlist" class="artitem clearfix" :to="{name:'article',params:{id:art.id}}">
跳转到name为'article'的路有上,并且有参数id=art.id。
我们再来看看路有怎么写:
const routes = [ { path: '/article/:id', name: 'article', component: article } ]