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

vue2 router-link to的更多相关文章

  1. vue2 router中的 @ 符号表示src

    vue2 router中的 @ 符号表示src 学习了:https://segmentfault.com/q/1010000009549802 这个是webpack起的别名: 在build/webpa ...

  2. [Redux] Navigating with React Router <Link>

    We will learn how to change the address bar using a component from React Router. In Root.js: We need ...

  3. Vue router link

    html: <router-link to="test">Go to Foo</router-link> <router-link to=" ...

  4. [React] React Router: Router, Route, and Link

    In this lesson we'll take our first look at the most common components available to us in react-rout ...

  5. angular2 学习笔记 ( Router 路由 )

    参考 : https://angular.cn/docs/ts/latest/guide/router.html#!#can-activate-guard https://angular.cn/doc ...

  6. [React] React Router: Redirect

    The Redirect component in react-router does exactly what it sounds like. It allows us to redirect fr ...

  7. [React] React Router: Querystring Parameters

    Define query param in Link, accept path and query : const Links = () => <nav > <Link to= ...

  8. [React] React Router: Named Components

    In this lesson we'll learn how to render multiple component children from a single route. Define a n ...

  9. [React] React Router: Route Parameters

    A router library is no good if we have to hardcode every single route in our application. In this le ...

  10. [React] React Router: IndexRoute

    IndexRoute allows us to define a default child component to be rendered at a specific route when no ...

随机推荐

  1. ARM 中断状态和SVC状态的堆栈切换 (异常)【转】

    转自:http://blog.csdn.net/edwardlulinux/article/details/9261393 版权声明:本文为博主原创文章,未经博主允许不得转载. ARM 中断状态和SV ...

  2. js数组高效去重

    http://blog.csdn.net/chengxuyuan20100425/article/details/8497277 这个方法的思路是先把数组排序,然后比较相邻的两个值. 排序的时候用的J ...

  3. PHPstorm创建注释模版

    /** * $NAME$ * @param * @return * @since $DATE$ * @author Name */$END$ /** * xxxx -­- Controller – 类 ...

  4. 【 LVS 】DR 方式实现过程

    LVS-DR方式实现负载均衡 一.环境介绍

  5. 使用System.getProperty("line.separator")时没有换行问题解决

    项目中要实现替换模版txt文本里面的内容,然后生成新的文档,其中先把模版文本的内容通过创建的 BufferedReader bufReader 使用 readLine() 来一行一行读取,所以在完成替 ...

  6. nginx之旅:安装及简单部署

    安装之前最好了解一下nginx,参考nginx百度百科吧,下面这一句话基本概括了nginx的基本功能 Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理  ...

  7. 第一篇:动态防火墙firewalld和静态防火墙iptables

    动态防火墙firewalld firewalld提供了一个动态管理的防火墙,它支持网络(network)/防火墙区域(firewall zones )来定义网络连接( network connecti ...

  8. laravel获取checkbox值的小技巧

    以前老是用三元运算符来判断,现在有了更好的方法: 1.html代码 <input type="hidden" name="approved" value= ...

  9. 利其器之webstorm快捷键

    总结几个webstorm常用的快捷键(macbook下) 最实用: command + option + 左/右箭头           定位到历史记录中上次/下次编辑的位置 command + b ...

  10. scrapy 最新版本中文文档地址

    http://scrapy-chs.readthedocs.org/zh_CN/latest/