详解vue中router-link标签所必备了解的属性


Posted in Javascript onApril 15, 2019

to

表示目标路由的链接。 当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个值可以是一个字符串或者是描述目标位置的对象。

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home" rel="external nofollow" >Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不写 v-bind 也可以,就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数,下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

replace

设置 replace 属性的话,当点击时,会调用 router.replace() 而不是 router.push(),导航后不会留下 history 记录。

<router-link :to="{ path: '/abc'}" replace></router-link>

append

设置 append 属性后,则在当前 (相对) 路径前添加基路径。例如,我们从 /a 导航到一个相对路径 b,如果没有配置 append,则路径为 /b,如果配了,则为 /a/b

<router-link :to="{ path: 'relative/path'}" append></router-link>

tag

有时候想要 渲染成某种标签,例如

于是我们使用 tag prop 类指定何种标签,同样它还是会监听点击,触发导航。

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

active-class

设置 链接激活时使用的 CSS 类名。可以通过以下代码来替代。 

<style>
 ._active{
  background-color : red;
 }
</style>
<p>
 <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
 <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>
注意这里 class 使用 active_class="_active"。

exact-active-class

配置当链接被精确匹配的时候应该激活的 class。可以通过以下代码来替代。

<p>
 <router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
 <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

event

声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

以上代码设置了 event 为 mouseover ,及在鼠标移动到 Router Link 1 上时导航的 HTML 内容会发生改变。

以上所述是小编给大家介绍的vue中router-link标签所必备了解的属性详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
javascript权威指南 学习笔记之null和undefined
Sep 25 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
Nov 29 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
Nov 09 Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
使用 Vue.js 仿百度搜索框的实例代码
May 09 Javascript
webpack 处理CSS资源的实现
Sep 27 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 Javascript
详解小程序设置缓存并且不覆盖原有数据
Apr 15 #Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 #Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 #Javascript
Vuex的actions属性的具体使用
Apr 14 #Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 #Javascript
vue自定义指令之面板拖拽的实现
Apr 14 #Javascript
详解Vue组件之间通信的七种方式
Apr 14 #Javascript
You might like
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
比较搞笑的js陷阱题
2010/02/07 Javascript
克隆javascript对象的三个方法小结
2011/01/12 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
简单了解什么是神经网络
2017/12/23 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
数控技术专业推荐信
2013/11/01 职场文书
政府门卫岗位职责
2014/04/29 职场文书
平安建设汇报材料
2014/12/29 职场文书
助学金感谢信
2015/01/20 职场文书
档案工作个人总结
2015/03/03 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python
Python实现视频自动打码的示例代码
2022/04/08 Python