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 ...
随机推荐
- IC卡的传输协议(1)-字符传输协议T=0【转】
转自:http://bbs.ednchina.com/BLOG_ARTICLE_172022.HTM 在异步半双工传输协议中,主要定义了终端为实现传输控制和特殊需要发出的命令及这些命令的处理过程. 在 ...
- Linux上Core Dump文件的形成和分析
原文: http://baidutech.blog.51cto.com/4114344/904419 Core,又称之为Core Dump文件,是Unix/Linux操作系统的一种机制,对于线上服务而 ...
- servlet+forward和direct区别
Servlet:是用于 java 编写的服务器端程序,其使用 java servlet API,当客户机发送请求到服务器时,服务器可以将请求信息发送给 servlet,并让 servlet 建立起服务 ...
- vue + vue-router + vue-resource 基于vue-cli脚手架 --->笔记
ps: 基于Vue2.0 npm的vue-cli脚手架 在vue-router中路由路径的简写代码: 点击打开项目 > build > webpack.base.conf.js 找到web ...
- Ansi,UTF8,Unicode,ASCII编码的区别 ---我看完了 明白了很多
来自:http://blog.csdn.net/xiongxiao/article/details/3741731 ------------------------------------------ ...
- 安装smartmontool报错:libc6-dev : 破坏:
https://blog.csdn.net/weixin_38705903/article/details/81947717
- 浅谈replace()
replace()简单介绍 replace()基本语法是String.replace(searchValue,replaceValue),其中searchValue为字符串或者正则,replaceVa ...
- Jquery EasyUI选项卡-Tabs的使用方法
以下是easyUI的tabs的简单实用介绍. var e =$('#main').tabs('exists','accordion'); if(e==true){ $('#main').tabs(' ...
- java应用高内存占用
在java虚拟机中,内存分为三个代:新生代(New), 老生代(Old).永久代(Perm) 新生代: 新建的对象都存放这里老生代:存放从新生代中迁移过来的生命周期较久的对象.新生代和老生代共同组成了 ...
- RabbitMQ (七) 订阅者模式之主题模式 ( topic )
主题模式和路由模式很像 路由模式是精确匹配 主题模式是模糊匹配 依然先通过管理后台添加一个交换机. 生产者 public class Producer { private const string E ...