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 ...
随机推荐
- OpenCV-2.4.6-android-sdk 人脸识别demo搭建
最近项目需要研究下人脸识别,在领导推荐下准备研究OpenCV 一,上官网了解下 基本知识 http://docs.opencv.org/doc/tutorials/introduction/andro ...
- 一点关于"fat model, skinny controller"的思考
导言 想来从事服务器端开发也有将近一年的时间,服务端开发不能忽略的一个架构就是MVC架构,但一开始作为小白的我对这些高大上的概念也是很迷惑,由于很长一段时间应对的业务也是十分简单,业务代码也是流水一样 ...
- 【 Zabbix 】— 监控nginx
一.环境说明 OS:centos6.7 x64 nginx:nginx/1.9.9 ZABBIX:2.4.8 zabbix监控nginx是根据nginx的stub_status模块,抓取status模 ...
- 手机端iscoll插件的使用方法
除了以前版本的iScroll的特性以外,iScroll 4还包括如下的特性: (1)缩放(Pinch/Zoom) (2)拉动刷新(Pull up/down to refresh) (3)速度和性能提升 ...
- selenium 下拉框处理
web应用中有很多时候我们会遇见<select></select>标签的下列列表框,一般是无法直接去操作下列列表中的选择的.selenium webdriver 提供了专门操作 ...
- poj2253 最短路变形
题目连接:http://poj.org/problem?id=2253 Description Freddy Frog is sitting on a stone in the middle of a ...
- dfs序七个经典问题[转]
dfs序七个经典问题 参考自:<数据结构漫谈>-许昊然 dfs序是树在dfs先序遍历时的序列,将树形结构转化成序列问题处理. dfs有一个很好的性质:一棵子树所在的位置处于一个连续区间中. ...
- [PKUSC2018]神仙的游戏(FFT)
给定一个01?串,对所有len询问是否存在一种填法使存在长度为len的border. 首先有个套路的性质:对于一个长度为len的border,这个字符串一定有长度为n-len的循环节(最后可以不完整) ...
- Vimperator常用快捷键
分别往下/往上滚动窗口一行 j/k 左右滚动窗口 h/l 向下/向上滚动一屏的窗口 <Space>/<C-b> 向下/向上滚动半屏的窗口 <C-d>/< ...
- 杂谈PID控制算法——第一篇:三个量
电赛训练了大半个暑假,人渐渐开始进入到了疲倦期.既然这样那就好好休息下自己也好吧. 休息也不能光休息,乘机把平常写过的一些东西好好整理也好. 从第一次训练开始我们就接触到了一个新的名词——PID控制理 ...