vue脚手架3中＜router-link＞的常用属性

最新推荐文章于 2024-07-24 07:45:00 发布
最新推荐文章于 2024-07-24 07:45:00 发布
阅读量3.1k 收藏 6
点赞数 2
分类专栏： vue脚手架中router的使用 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HOMEXS/article/details/114376408
版权

<router-link>的常用属性

<router-link>是路由对象里面已经封装好的一个组件， 支持用户在具有路由功能中的点击导航。


1.to属性：可以通过to属性指定目标地址
在这里插入图片描述
2.replace属性：不需要接属性值，当你点击不同的组件时默认是通过history.pushState方式来路由跳转，history.pushState方式可以点浏览器的返回来返回到上一个页面地址，类似栈中数据的存取方式，当我们添加了replace属性后会通过history.replaceState方式来跳转页面，history.replaceState是通过替换上一个页面的地址来页面跳转的，故不可再返回到上一个页面
在这里插入图片描述
3.active-class属性：当对应的路由处于活跃状态时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认名称
在这里插入图片描述
在这里插入图片描述
4.在这里再教大家另一个修改这个router-link-active的class名称的方法，在router文件夹下的index.js里面，router里添加一个linkActiveClass属性，属性值就是router-link-active类更改后的名字，这样的好处就是当项目中有多个<router-link>时不用一个一个改，代码也更简介美观
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述 在这里插入图片描述

前端小菜渣渣徐
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
router-link八种属性介绍
qq_28134589的博客
08-05 1325
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 :
在 Vue3中，封装一个 router-links ,支持内外链接都能跳转！
2401_84091993的博客
04-16 524
后记总结一下这三次面试下来我的经验是：一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！多刷面经！
router-link-active和router-link-exact-active
最新发布
HWL5679的博客
07-24 360
在Vue Router中，router-link-active是一个动态类名，用于表示当前激活的路由链接。
vue中router-link标签所必备了解属性
weixin_41224029的博客
04-10 3460
to 表示目标路由的链接。 当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。 <!-- 字符串 --> <router-link to="home">Home</router-link> <!-- 渲染结果 --> <a href="home">Home</a...
Vue router之router-link属性
Mountains_river的博客
08-03 483
router-link标签在Vue router中是很常用的标签 下面我们来了解一下有关于他的属性 <router-link to="/home">首页</router-link> <router-link to="/about">关于</router-link> 1.tag属性 to属性会将router-link渲染成a标签，但是如果我们想将router-link渲染成button等其他标签的时候我们该怎么做呢？ <route
vue实现直播弹幕功能
2301_82242670的博客
03-29 535
前端校招精编面试解析大全点击这里即可获取完整版pdf查看实战项目、讲解视频，并且会持续更新！**如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）前端校招精编面试解析大全点击这里即可获取完整版pdf查看。
在vue-cli脚手架中配置一个vue-router前端路由
12-09
<router-link to="/news/list">列表</router-link> <router-view></router-view> ``` 至此，一个基本的Vue前端路由配置就完成了。当用户点击链接时，相应的组件将在`<router-view>`中动态替换，提供平滑的页面切换...
基于vue-cli vue-router搭建底部导航栏移动前端项目
01-21
vue.js学习 踩坑第一步 1.首先安装vue-cli脚手架 不多赘述，主要参考 Vue 爬坑之路（一）—— 使用 vue-cli 搭建项目   2.项目呈现效果 ... <router class=view></router> <div class=nav> <router-link
基于vue脚手架的路由系统的使用
10-02
在"基于vue脚手架的路由系统的使用"这个主题中，我们将探讨如何使用Vue CLI 3创建项目，并集成Vue Router来实现页面间的导航。Vue Router是Vue.js的官方路由库，它是单页应用（SPA）中必不可少的部分，负责管理不同...
Vue.js路由组件vue-router使用方法详解
10-20
router-link通过to属性指定要导航到的路径，它默认渲染成一个`<a>`标签。router-view则作为挂载点，匹配的组件将被渲染在这里。 4. **路由定义与配置**: 定义路由需要创建一个路由配置数组，该数组包含了所有路由与...
router-link常用属性
秋来九月八
11-05 2384
totag属性replace属性native修饰符active-class属性appendeventexactrouter-link 是 Vue Router 提供的用于导航的组件，它可以用来创建链接到不同路由的链接。
router-link的属性
weixin_45736311的博客
06-30 273
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 属性
Elainerui的博客
10-20 320
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可以
router-link属性
qq_47230378的博客
04-14 370
<router-link>该标签是一个vue-router中已经内置的组件，它会被渲染成一个a标签 to属性：用于指定跳转的路径 tag属性:指定<router-link>之后渲染成什么组件 replace属性：replace不会记录history记录，所以指定replace的情况下，后退键返回不能返 回到上一个页面中 active-cl...
vue3 router-link 自定义高亮（ isActive isExactActive ）问题
qq_39549013的博客
08-16 2122
基础的router-link的使用< router - link to = "/" > 待办事项 < / router - link > < router - link to = "/compelete" > 完成 < / router - link > < router - link to = "/delete" > 已删除 < / router - link >
router-link属性介绍
宇智波带土
03-01 1135
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
【vue3 路由使用与讲解】vue-router ： 简洁直观的全面介绍
从今年开始写写博客~~
03-02 2505
vue-router,动态路由,动态添加路由addRoute,命名路由name,路由重定向redirect,路由传参params,query,组合式Api,路由跳转页面router-link,push,replace,获取路由参数,路由导航守卫,路由模式,路由缓存,嵌套路由,路由别名,声明路由
vue2脚手架，如何在轮播图中用<router-link></router-link>代替<a></a>
06-09
在 Vue 2 的脚手架中，你可以通过以下步骤在轮播图中使用 `<router-link>`： 1. 首先，在你的 Vue 组件中导入 `router-link` 组件： ```javascript import { RouterLink } from 'vue-router' ``` 2. 然后，在你的轮播图模板中，用 `RouterLink` 组件替换 `<a>` 标签。例如： ```html <template> <div> <swiper :options="swiperOptions"> <swiper-slide> <router-link to="/product/1"> <img src="http://example.com/img1.jpg"> </router-link> </swiper-slide> <swiper-slide> <router-link to="/product/2"> <img src="http://example.com/img2.jpg"> </router-link> </swiper-slide> <swiper-slide> <router-link to="/product/3"> <img src="http://example.com/img3.jpg"> </router-link> </swiper-slide> </swiper> </div> </template> ``` 在这个例子中，我们使用 `RouterLink` 组件包裹了每个轮播图项的图片，并使用 `to` 属性指定了链接的目标路由。这样，在单击轮播图项时，Vue Router 会自动跳转到相应的路由。 3. 最后，别忘了在你的 Vue 组件中引入 `swiper` 库和样式，并在 `data` 中定义 `swiperOptions`。 这样，你就可以在 Vue 2 的脚手架中使用 `<router-link>` 替代 `<a>`，实现轮播图的路由导航了。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值