router-link属性

最新推荐文章于 2023-02-16 21:45:54 发布
最新推荐文章于 2023-02-16 21:45:54 发布
阅读量365 收藏
点赞数 1
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47230378/article/details/124183525
版权

       <router-link>该标签是一个vue-router中已经内置的组件， 它会被渲染成一个a标签

         to属性：用于指定跳转的路径

         tag属性:指定<router-link>之后渲染成什么组件

         replace属性：replace不会记录history记录，所以指定replace的情况下，后退键返回不能返                         回到上一个页面中

         active-class:当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个

                        router-link-active的class，

         设置active-class可以修改默认的名称.

         该class具体的名称也可以通过router实例的属性进行修改

 

         exact-active-class:类似于active-class，只是在精准匹配下才会出现的class

陈吖
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
＜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.
router-link八种属性介绍
qq_28134589的博客
08-05 1305
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 :
vue脚手架3中＜router-link＞的常用属性
HOMEXS的博客
03-04 3088
<router-link>的常用属性 <router-link>是路由对象里面已经封装好的一个组件， 支持用户在具有路由功能中的点击导航。 1.to属性：可以通过to属性指定目标地址 2.replace属性：不需要接属性值，当你点击不同的组件时默认是通过history.pushState方式来路由跳转，history.pushState方式可以点浏览器的返回来返回到上一个页面地址，类似栈中数据的存取方式，当我们添加了replace属性后会通过history.replaceStat
vue中router-link标签所必备了解属性
weixin_41224029的博客
04-10 3437
to 表示目标路由的链接。 当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。 <!-- 字符串 --> <router-link to="home">Home</router-link> <!-- 渲染结果 --> <a href="home">Home</a...
router-link属性介绍
宇智波带土
03-01 1115
tag tag可以指定<router-link> 之后渲染成什么组件，比如tag="button"将会被渲染成button样式。 <router-link to="/home" tag="button">首页</router-link> replace replace不会留下history记录，指定replace的情况下，后退返回键不能返回的上一个页面。 <router-link to="/home" replace>首页</route
详谈vue中router-link和传统a链接的区别
10-15
此外，`<router-link>` 的`to`属性可以简化路径书写，特别是当设置`base`选项后，你无需再在`to`属性中包含基路径。而`<a>` 标签的`href`属性则需要完整的URL。 `<router-link>` 还允许自定义渲染标签，通过`tag`...
【JavaScript源代码】Vue router-view和router-link的实现原理.docx
12-29
在实现上，`<router-link>` 接收 `to` 属性，表示要跳转的目标路径，并可选地接收 `tag` 属性来自定义渲染的 HTML 元素。在内部，它会监听点击事件，然后调用 `$router.push()` 方法来改变当前的路由。 例如，下面...
详解vue-router 2.0 常用基础知识点之router-link
12-09
总结起来，Vue Router 2.0 中的`router-link`、`$route.params`、`$route.query`和`meta`属性都是构建动态路由和处理导航的重要工具。它们使我们能够灵活地管理应用中的页面跳转和数据传递，同时提供了一种方式来...
vue router-link传参以及参数的使用实例
08-28
另外，关于`router-link`的`to`属性前的斜杠`/`，如果`to`以`/`开头，那么路由将从根路径开始，如果不带`/`，则从当前路由的子路径开始。 `this.$route`对象不仅包含了当前激活的路由信息，还包括路径、参数、查询...
vue中router-link标签属性
zhiranyouni的博客
04-22 4263
to 表示目标路由的链接。 当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。 <!-- 字符串 --> <router-link to="home">Home</router-link> <!-- 渲染结果 --> <a href="home">Home&l...
Vue路由界面强制刷新
u012201879的博客
12-25 2976
需求： 当前url:http://localhost:8080/certxxx/app 要访问http://localhost:8080/certxxx/app这个Url的时候视图是不刷新的 想让他刷新可以使用以下两种做法: 一、手动控制刷新(适合想控制刷新某些值需求) 1.跳转时添加query属性让url变得不一样 2.添加之后还是不会刷新，在要强制刷新的页面里使用watch方法来观察跳转操作手动刷新所需数据 二、全刷新页面（就跟默认进来一样） 1.跳转时添加query属性让url变得不一样 2.在添加k
router-link
weixin_35750953的博客
02-16 237
router-link 是一个 Vue.js 框架中的组件，用于在单页应用程序中实现路由导航。它可以通过将其绑定到一个目标路由路径来创建可点击的链接，当用户点击链接时，路由会将用户导航到指定的目标页面。使用 router-link 可以方便地实现页面间的跳转和前进后退操作，同时也可以支持传递参数和设置样式等功能。 ...
router-link使用详解
weixin_43905830的博客
05-06 3万+
router-link组件的属性 to、replace、append、tag、active-class、exact、event、exact-active-class。 属性介绍 1、to（必选参数）：类型是string/location //字符串 <router-link to="path（路径）">AAAA</router-link> //对象 <router-...
＜router-link＞
LH2HA3的博客
06-29 1709
基本用法
router-link标签
远方不远
09-30 1837
router-link标签 在vue1.0版本中的仍然用a标签来实现链接跳转功能，但链接地址与html中不同，它是采用v-link属性来控制。但是在2.0版本中a标签就被替换成了rount-link属性，但是最终在页面上显示还是会被渲染成a标签。接下来将要详细的介绍该属性中的各个值的用法 router-link属性值详解 （1）":to" 属性值 这个属性值就相当于a标签中的"herf"属性，后面的内容为跳转链接的内容 ```<router-link :to="http://www.gxl
vue 路由 router
259的博客
12-26 550
vue 路由 router
如何使用router-link对象方式传递参数？
热门推荐
草巾冒小子的博客
05-11 7万+
如何使用router-link对象方式传递参数？ 疑问：（判断和传参） 点击导航栏目，js如何判断自己点击的是哪个具体栏目？ 它们是如何传参的？ 效果图解说： A. 点击选择【屈原“查看详情”】之前 B. 点击选择【屈原“查看详情”】之后 要点总结： 在vue-router中，有两大对象被挂载到了实例this； $route（...
router-link的tag属性以及router-view的复用
A13330069275的博客
07-19 9484
&lt;router-link to="/"  tag="div" class="nav-link"&gt;主页&lt;/router-link&gt;   可用tag改变默认元素       如果 &lt;router-view&gt;设置了名称，则会渲染对应的路由配置中 components 下的相应组件。查看 命名视图 中的例子。    ...
记录一个router-link和v-for联合使用的坑
little_little0_0的博客
03-11 7428
错误代码： &amp;amp;lt;div id=&amp;quot;app&amp;quot;&amp;amp;gt; &amp;amp;lt;router-link v-for=&amp;quot;item in items&amp;quot; to=&amp;quot;'/' + item.id&amp;quot; :key=&amp;quot;item.id&amp;
router-link 属性
最新发布
04-01
router-link 属性用于在 Vue.js 应用程序中创建路由链接。它是 Vue.js 中的一个内置组件，可以将其添加到 HTML 元素中，以便在应用程序中访问不同的页面或视图。 router-link 属性可用于以下属性： - to: 指定链接目标的路由路径 - tag: 指定 router-link 渲染的 HTML 标签，默认为 a 标签 - exact: 布尔值，指定是否将路由匹配设置为精确匹配 - active-class: 指定当路由匹配时应用的 CSS 类名 - event: 指定触发路由的事件名称，例如 click 例如，以下代码将创建一个路由链接，指向名为“home”的路由路径： ```html <router-link to="/home">Home</router-link> ``` 在应用程序中，当用户单击该链接时，将显示名为“home”的视图或页面。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值