router-link的属性

最新推荐文章于 2022-06-29 11:15:36 发布
最新推荐文章于 2022-06-29 11:15:36 发布
阅读量259 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45736311/article/details/118367165
版权 
1. to属性：用于指定跳转的路径
<router-link to="/shouye">首页</router-link>

2. tag属性：可指定<router-link>之后渲染成什么组件，都行
比如想将它渲染成<button>标签(渲染之后依然具有a标签的属性)
<router-link to="/shouye"  ta="button" >首页</router-link>

3. replace属性：可让浏览器左上方的那两个箭头固定不变，不会来回切换
<router-link to="/shouye" replace >首页</router-link>

添加replace属性前

添加后
在这里插入图片描述

4.使 当点击标签后 标签中对应的文字会改变颜色

在这里插入图片描述

礼礼。
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
router-link八种属性介绍
qq_28134589的博客
08-05 1302
router-link组件的属性有： to 、replace、 append、 tag、 active-class、 exact 、 event、 exact-active-class 1 to <router-link :to="{name:'home',query:{kkk:'5555'}}">home页</router-link> <router-link to="home">Home</router-link> <router-link :
＜router-link＞属性详解
热门推荐
得意小门生的博客
08-07 2万+
<router-link>组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址，默认渲染为带有正确连接的 <a> 标签，可以通过配置tag属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的css类名 <router-link>组件的属性有： to 、replace、 append、 tag、 active-class、 exact 、 event、 exact-active-class to（必选参数）：类型string.
Vue-router学习01_路由基本配置，router-link相关以及动态路由实现
m0_46725128的博客
03-18 392
router基本配置 在用CLI4创建项目时选上router的选项，可自动在src文件夹下创建router文件夹，里面有index.js文件，保存着路由相关的配置 import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [ // routes保存着路径和组件之间的映射联系
router-link常用属性
秋来九月八
11-05 2279
totag属性replace属性native修饰符active-class属性appendeventexactrouter-link 是 Vue Router 提供的用于导航的组件，它可以用来创建链接到不同路由的链接。
把router-link标签渲染成指定的标签
weixin_30600197的博客
04-01 568
<router-link>标签默认渲染成 <a>标签，可以通过tag属性把router-link渲染成指定的标签，如： <router-link to="/" tag="li"><span>home</span></router-link> 转载于:https://www.cnblogs.com/luguank...
router-link(参数)
xr1015的博客
09-05 229
在vue-router中，有两大对象被挂载到了实例this route(只读、具备信息的对象)、route(只读、具备信息的对象)、route(只读、具备信息的对象)、router(具备功能函数) 查询字符串 1: 去哪里<router-link :to="{name:'detail',query:{id:1} }">xxx</router-link> 2: ...
详谈vue中router-link和传统a链接的区别
10-15
此外，`<router-link>` 的`to`属性可以简化路径书写，特别是当设置`base`选项后，你无需再在`to`属性中包含基路径。而`<a>` 标签的`href`属性则需要完整的URL。 `<router-link>` 还允许自定义渲染标签，通过`tag`...
详解vue-router 2.0 常用基础知识点之router-link
08-30
`router-link`组件是Vue Router提供的一个特殊组件，它的`to`属性用于指定链接的目标路由。例如： ```html <router-link to="/home">首页</router-link> ``` 当用户点击这个链接时，Vue Router会根据`to`属性的...
第七课 router-link配置与Router构建选项1
最新发布
08-03
当当前路由匹配到 `router-link` 的 `to` 属性时，这个类名将被添加到 `router-link` 元素上。 5. **exact**: 使用 `exact` 属性可以实现精确匹配。只有当路由路径完全与 `to` 属性匹配时，`active-class` 才会被...
详解vue中router-link标签所必备了解的属性
10-17
主要介绍了vue中router-link标签所必备了解的属性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
react-router中Link/的属性详解
11-29
本文主要给大家介绍了关于react-router中 的属性的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍： 使用Link标签 // 字符串定位描述符 String location descriptor. <Link to="/hello"> ...
vue系列 <router-link>属性
我是一言
06-22 614
<router-link>属性 <router-link>这里用到了一个to属性，并且把它渲染成<a>标签，他还有其他属性： tag tag可以指定<router-link>之后渲染成什么组件, 比如要渲染成button <router-link to="/home" tag="button">首页</router-link&...
＜router-link＞
LH2HA3的博客
06-29 1701
基本用法
vue脚手架3中＜router-link＞的常用属性
HOMEXS的博客
03-04 3082
<router-link>的常用属性 <router-link>是路由对象里面已经封装好的一个组件， 支持用户在具有路由功能中的点击导航。 1.to属性：可以通过to属性指定目标地址 2.replace属性：不需要接属性值，当你点击不同的组件时默认是通过history.pushState方式来路由跳转，history.pushState方式可以点浏览器的返回来返回到上一个页面地址，类似栈中数据的存取方式，当我们添加了replace属性后会通过history.replaceStat
router-link的属性，使用
mouth594251的博客
09-23 556
7.
Vue学习Day11 router-link属性、动态路由、路由的懒加载、嵌套路由、路由的参数传递、代码跳转路由
AIpoem的博客
07-14 3787
1. router-link补充 2. 通过代码跳转路由 3. 动态路由 4. 路由的懒加载 5. 嵌套路由 6. 命名视图 7. 路由的参数传递
router-link属性
qq_47230378的博客
04-14 361
<router-link>该标签是一个vue-router中已经内置的组件，它会被渲染成一个a标签 to属性：用于指定跳转的路径 tag属性:指定<router-link>之后渲染成什么组件 replace属性：replace不会记录history记录，所以指定replace的情况下，后退键返回不能返 回到上一个页面中 active-cl...
router-link 属性
Elainerui的博客
10-20 305
router-link 属性补充 1.to 进行页面跳转，更改路径 2.tag : 指定<router-link>之后渲染成什么组件，比如将其渲染成<li> 3.replace : replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面 4.active-class : <router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

礼礼。

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值