vue.js----之router详解(一)
在vue1.0版本的超链接标签还是原来的a
标签,链接地址由v-link
属性控制
而vue2.0版本里超链接标签由a
标签被替换成了router-link
标签,但最终在页面还是会被渲染成a标签的
至于为什么要把a换成router-link原因还是有的,比如我们之前一直惯用的nav导航里面结构是(ul>li>a),touter-link可以渲染为任何元素,这里可以直接渲染成li标签,同样能实现跳转效果,节省了a标签的使用,还有一个原因可能是因为a标签正常是链接的跳转的作用,点击a时可能会重载页面,使用router-link,此标签会被vue所监听,跳转链接时就不会刷新页面了。当然这个人理解,不对之处有望指正。
"router-link"属性
1.":to" 属 性
相当于a标签中的"herf"属性,后面跟跳转链接所用
<router-link :to="/home">Home</router-link>
<!-- 渲染结果 -->
<a href="/home">Home</a>
2."replace" 属 性
replace在routre-link标签中添加后,页面切换时不会留下历史记录
<router-link :to="/home" replace></router-link>
3."tag" 属 性
具有tag属性的router-link会被渲染成相应的标签
<router-link :to="/home" tag="li">Home</router-link>
<!-- 渲染结果 -->
<li>Home</li>
此时页面的li同样会起到a链接跳转的结果,vue会自动为其绑定点击事件,并跳转页面
4."active-class" 属 性
这个属性是设置激活链接时class属性,也就是当前页面所有与当前地址所匹配的的链接都会被添加class属性
<router-link :to="/home" active-class="u-link--Active">Home</router-link>
active-class
属性的默认值是router-link-active
,所以如果没有设置,就会被渲染为这个class
可以在router.js里面设置
const router = new VueRouter({
mode: 'hash',
linkActiveClass: 'u-link--Active', // 这是链接激活时的class
})
5."exact" 属 性
开启router-link
的严格模式
<router-link :to="/" exact>home</router-link>
上面这个标签如果不加exact
属性,则会在vue2.leenty.com/article
页面下也会被匹配到,
这却不是我们的本意,在加了这个属性后就会正确的匹配到vue2.leenty.com
下
vue.js----之router详解(一)的更多相关文章
- Vue.js 数据绑定语法详解
Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...
- vue.js自定义指令详解
写在文本前:相信在做vue的项目,你肯定接触了指令,我们常用vue内置的一些指令,比如v-model,v-text,v-if,v-show等等,但是这些内置指令不在本文的讲解范畴,本文想说的是其自定义 ...
- vue.js 之 watch 详解
接我上篇博客的例子: 在上面代码中,当我们修改 firstName 或 lastName 后,watch 监听每次修改变化的新值,然后计算输出 fullName:此时 watch 的一个缺点是,最初绑 ...
- Vue组件通信方式全面详解
vue组件通信方式全面详解 众所周知,Vue主要思想就是组件化开发.因为,在实际的项目开发中,肯定会以组件的开发模式进行.形如页面和页面之间需要通信一样,Vue 组件和组件之间肯定也需要互通有无.共享 ...
- 《Node.js开发实战详解》学习笔记
<Node.js开发实战详解>学习笔记 ——持续更新中 一.NodeJS设计模式 1 . 单例模式 顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直 ...
- Js apply 方法 详解
Js apply方法详解 我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...
- ES6,ES2105核心功能一览,js新特性详解
ES6,ES2105核心功能一览,js新特性详解 过去几年 JavaScript 发生了很大的变化.ES6(ECMAScript 6.ES2105)是 JavaScript 语言的新标准,2015 年 ...
- Js apply()使用详解
Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...
- Js apply方法详解,及其apply()方法的妙用
Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...
- JS hashMap实例详解
链接:http://www.jb51.net/article/85111.htm JS hashMap实例详解 作者:囧侠 字体:[增加 减小] 类型:转载 时间:2016-05-26我要评论 这篇文 ...
随机推荐
- Centos7使用man查找命令时,报错No manual entry for xxxx
man ascii时报错 解决报错的方法: yum install man-pages
- 「SHOI2015」(LOJ2038)超能粒子炮・改
传送门:Here 一句话题意:给定$ t$次询问,每次读入$n,k,$求$ \sum_{i=0}^kC_n^k\ mod\ 2333$, 其中$ t \leq 100000$,$n,k \leq 10 ...
- Spring Data
官网地址 http://projects.spring.io/spring-data 包含子项目 简介 Spring Data 是 Spring 的一个子项目.用于简化数据库访问,支持NoSQL,关系 ...
- 小玩意--自定义log记录
之前在帮TCL运维项目时,因某些原因,决定单就经销商相关业务中摒弃经典的log4j日志,改为每日自定义生成并写入相关日志,我遂写了一个util,代码如下:p.s.实现的思路很简单,仅为每次需要记录时, ...
- springboot中使用过滤器、拦截器、监听器
监听器:listener是servlet规范中定义的一种特殊类.用于监听servletContext.HttpSession和servletRequest等域对象的创建和销毁事件.监听域对象的属性发生 ...
- nginx 端口映射多个应用
nginx端口映射多个应用,应用中的静态资源路径尽量是写相对路径 server { listen 8000; location / { proxy_pass http://10.1.166.216:9 ...
- 1.Spring Boot入门及其jar包依赖模型分析
Spring Boot介绍 Spring Boot是由Pivotal团队提供的新框架,其设计目的是简化Spring应用的搭建以及开发过程.其目标是: 为所有Spring开发提供一个从根本上更快,且方便 ...
- Python 编程核心知识体系(REF)
Python 编程核心知识体系: https://woaielf.github.io/2017/06/13/python3-all/ https://woaielf.github.io/page2/
- JavaScript中的this -- 好像很有道理版
函数调用 首先需要从函数的调用开始讲起. JS(ES5)里面有三种函数调用形式: func(p1, p2) obj.child.method(p1, p2) func.call(context, p1 ...
- 题解-CodeForces835F Roads in the Kingdom
Problem CodeForces-835F 题意:求基环树删去环上任意一边后直径最小值,直径定义为所有点对最近距离的最大值 Solution 首先明确删去环上一点是不会影响树内直径的,所以应当先把 ...