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
}
]
vue2 router-link to的更多相关文章
- vue2 router中的 @ 符号表示src
vue2 router中的 @ 符号表示src 学习了:https://segmentfault.com/q/1010000009549802 这个是webpack起的别名: 在build/webpa ...
- [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 ...
- Vue router link
html: <router-link to="test">Go to Foo</router-link> <router-link to=" ...
- [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 ...
- angular2 学习笔记 ( Router 路由 )
参考 : https://angular.cn/docs/ts/latest/guide/router.html#!#can-activate-guard https://angular.cn/doc ...
- [React] React Router: Redirect
The Redirect component in react-router does exactly what it sounds like. It allows us to redirect fr ...
- [React] React Router: Querystring Parameters
Define query param in Link, accept path and query : const Links = () => <nav > <Link to= ...
- [React] React Router: Named Components
In this lesson we'll learn how to render multiple component children from a single route. Define a n ...
- [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 ...
- [React] React Router: IndexRoute
IndexRoute allows us to define a default child component to be rendered at a specific route when no ...
随机推荐
- ARM 中断状态和SVC状态的堆栈切换 (异常)【转】
转自:http://blog.csdn.net/edwardlulinux/article/details/9261393 版权声明:本文为博主原创文章,未经博主允许不得转载. ARM 中断状态和SV ...
- js数组高效去重
http://blog.csdn.net/chengxuyuan20100425/article/details/8497277 这个方法的思路是先把数组排序,然后比较相邻的两个值. 排序的时候用的J ...
- PHPstorm创建注释模版
/** * $NAME$ * @param * @return * @since $DATE$ * @author Name */$END$ /** * xxxx -- Controller – 类 ...
- 【 LVS 】DR 方式实现过程
LVS-DR方式实现负载均衡 一.环境介绍
- 使用System.getProperty("line.separator")时没有换行问题解决
项目中要实现替换模版txt文本里面的内容,然后生成新的文档,其中先把模版文本的内容通过创建的 BufferedReader bufReader 使用 readLine() 来一行一行读取,所以在完成替 ...
- nginx之旅:安装及简单部署
安装之前最好了解一下nginx,参考nginx百度百科吧,下面这一句话基本概括了nginx的基本功能 Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 ...
- 第一篇:动态防火墙firewalld和静态防火墙iptables
动态防火墙firewalld firewalld提供了一个动态管理的防火墙,它支持网络(network)/防火墙区域(firewall zones )来定义网络连接( network connecti ...
- laravel获取checkbox值的小技巧
以前老是用三元运算符来判断,现在有了更好的方法: 1.html代码 <input type="hidden" name="approved" value= ...
- 利其器之webstorm快捷键
总结几个webstorm常用的快捷键(macbook下) 最实用: command + option + 左/右箭头 定位到历史记录中上次/下次编辑的位置 command + b ...
- scrapy 最新版本中文文档地址
http://scrapy-chs.readthedocs.org/zh_CN/latest/