<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. 【反演复习计划】【bzoj3994】DZY loves maths

    这题大概就是提取一下d,然后就跟前面的题目差不多了. #include<bits/stdc++.h> #define N 10000005 using namespace std; typ ...

  2. docker从零开始网络(二)桥接网络

    使用桥接网络 在网络方面,桥接网络是链路层设备,它在网络段之间转发流量.桥接网络可以是硬件设备或在主机内核中运行的软件设备. 就Docker而言,桥接网络使用软件桥接器,该软件桥接器允许连接到同一桥接 ...

  3. flask的插件

    详情参考官方文档 组件一:flask-session 安装: pip  install  flask-session 使用方法:先导入   from flask_session import Sess ...

  4. Linux下安装Sybase ASE 16

    https://jingyan.baidu.com/article/414eccf67281a16b421f0a76.html

  5. PHP实现innodb的数据回滚

    //实例化的数据库对象$model = new Model();//开启事务$model->startTrans();//默认结果$judge = true;//数据操作$sql1 =" ...

  6. 使用 gulp 编译 Sass

    无论是 node-sass 还是 ruby-sass 使用 npm 安装都非常的慢,甚至会装不上.及其不利于团队协作.建议使用 less 作为 css 预处理器. 如果因为 less 不支持自定义函数 ...

  7. Git命令使用指南

    继续git相关的东西,网上很多讲解的,但是还是喜欢这个图:(爱屋及乌,当然内容也很好,文章链接:http://me.iblogc.com/2015/01/16/Git命令使用指南/) Git是软件开发 ...

  8. wwwscan网站目录文件批量扫描工具

    准备一个比赛样题里面给的一个扫描的工具: 不知道怎么用就上网百度了一下果然有关于这个软件的两篇介绍(感觉写的很好),第一篇介绍的应该和我的工具一样,也给了例子(现在Google不能访问了)和参数介绍, ...

  9. Android学习--广播机制

    广播机制简介 Android的广播可以分为两种类型的,标准广播和有序的广播: 标准广播:  是一种完全异步执行的广播,在广播发出去之后,所有的广播接收器几乎是同一时接收到这条广播. 有序广播:  是一 ...

  10. 折半搜索+状态压缩【P3067】 [USACO12OPEN]平衡的奶牛群Balanced Cow S…

    Description 给n个数,从中任意选出一些数,使这些数能分成和相等的两组. 求有多少种选数的方案. Input 第\(1\)行:一个整数\(N\) 第\(2\)到\(N+1\)行,包含一个整数 ...