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
    }
]

 

posted @ 2017-04-27 14:18  每日健身  阅读(397)  评论(0编辑  收藏  举报