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 ...
随机推荐
- linux平台从源码安装git【转】
转自:http://blog.csdn.net/lianshaohua/article/details/50571560 版权声明:本文为博主原创文章,未经博主允许不得转载. 如果是ubuntu等能自 ...
- windows下nginx安装及使用
nginx简介: nginx是一款轻量级web服务器,也是一款反向代理服务器(比如域名转发等). nginx功能: 1.可直接支持Rails和PHP的程序. 2.可作为HTTP反向代理服务器. 3.作 ...
- JavaScript的条件运算符与条件语句
1.条件运算符 比较运算符 == 判断左右两边数据的值是否相等 === 判断左右两边数据的之是否相等,同时还判断两边的数据类型是否一样 != 比较运算符的比较结果都是布尔值,true或者f ...
- Solidity 文档--第二章:安装 Solidity
安装Solidity 基于浏览器的Solidity 如果你只是想尝试一个使用Solidity的小合约,你不需要安装任何东西,只要访问基于浏览器的Solidity. 如果你想离线使用,你可以保存页面到本 ...
- Centos 下,配置 Apache + Python + Django + postgresSQL 开发环境
用 Python 搭建一个 Web 服务器 文章结构 一.安装 Apache.Python.django 二.安装 mod_wsgi,Apache 为 Python 提供的 wsgi 模块 三.将 ...
- 使用python抓取并分析数据—链家网(requests+BeautifulSoup)(转)
本篇文章是使用python抓取数据的第一篇,使用requests+BeautifulSoup的方法对页面进行抓取和数据提取.通过使用requests库对链家网二手房列表页进行抓取,通过Beautifu ...
- 洛谷 P1182 数列分段`Section II`【二分答案】
[代码]: #include<bits/stdc++.h> const double eps = 1e-8; const int maxn = 1e6+5; #define inf 0x3 ...
- 使用selenium模拟知网登录
之前都是用phantomjs和selenium模拟浏览器动作的,后来phantomjs不再更新,就转用chrome了 本次模拟登录的网站是中国知网http://login.cnki.net/login ...
- 洛谷——P1722 矩阵 II
P1722 矩阵 II 题目背景 usqwedf 改编系列题. 题目描述 如果你在百忙之中抽空看题,请自动跳到第六行. 众所周知,在中国古代算筹中,红为正,黑为负…… 给定一个1*(2n)的矩阵(us ...
- centos7 启用iptables
在centos 7下启用iptables systemctl stop firewalld.service systemctl disable firewalld.service yum instal ...