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中的阻塞机制及等待队列【转】
转自:http://www.cnblogs.com/gdk-0078/p/5172941.html 阻塞与非阻塞是设备访问的两种方式.驱动程序需要提供阻塞(等待队列,中断)和非阻塞方式(轮询,异步通知 ...
- vue + vue-router + vue-resource 基于vue-cli脚手架 --->笔记
ps: 基于Vue2.0 npm的vue-cli脚手架 在vue-router中路由路径的简写代码: 点击打开项目 > build > webpack.base.conf.js 找到web ...
- 关于MYSQL表记录字段换行符回车符处理
http://hualong.iteye.com/blog/1933023 今天遇到一个非常奇葩的问题,数据库表中明明有值却查询不不出来,而然一次从单元格中复制到sql中,发现右侧单引号换行了,我初步 ...
- Codeforces 810 B. Summer sell-off
B. Summer sell-off time limit per test 1 second memory limit per test 256 megabytes input standard ...
- 使用Nginx+uWSGI部署Django项目
1.linux安装python3环境 参考链接:https://www.cnblogs.com/zzqit/p/10087680.html 2.安装uwsgi pip3 install uwsgi l ...
- Kattis - boxes (dfn序)
Boxes There are N boxes, indexed by a number from 1 to N . Each box may (or not may not) be put into ...
- 推荐下载CentOS下各种组件的网址
http://vault.centos.org/ ftp://mirrors.sohu.com/ http://mirror.webtatic.com/
- C语言计算器
地址: https://wenda.so.com/q/1371173683061754?src=140
- Spark机器学习:TF-IDF实例讲解
测试数据源:20 Newsgroups (http://qwone.com/~jason/20Newsgroups/),其中包含20个领域的新闻,此次我们使用20news-bydate-train作为 ...
- js创建json对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...