router-link的用法

已于 2022-05-30 22:42:37 修改
阅读量8.9k 收藏 6
点赞数 1
分类专栏： 笔记 文章标签： vue.js 前端 javascript
于 2022-05-30 21:44:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47373456/article/details/125054542
版权
本文介绍了在 Vue.js 中 `router-link` 的两种常见用法：1) 跳转同一级的路由页面，类似于a标签直接跳转，无需`router-view`；2) 在上级组件中展示子路由，需要`router-view`占位，类似微信开发中的分段器效果。
摘要由CSDN通过智能技术生成

@路由@router-link有两种用法（个人想法，如理解有误请大佬指正）
如下home和cart页面同一级
1.跳转同一级的路由页面，相当于a标签直接跳到新页面，无需router-view占位符

 <router-link to="/home" tag="button">跳转同一级home的页面</router-link>
 <router-link to="/cart" tag="button"
最低0.47元/天 解锁文章
码农77号
关注
专栏目录
VUE中利用router-link用法
weixin_42542422的博客
06-12 1073
vue开发APP中,往往会在一个区块中 利用ajax获取多种数据,然后再利用v-for将其循环到这个区块里. 比如饿了么的店铺,去哪儿网的旅游推荐.等等 就以去哪儿网举例 每一个热门景点都是可以单独点击,并且跳转对应的页面 一般的router跳转方法都是在 这个li盒子上套上一个 标签,这样就可以进行路由跳转 <router-link to="/detail"> <li class="item border-bottom" v-for="item in list" :key="
spyke-react-hook-router-link:从React Router的Link逻辑中提取的React钩子，可以更轻松地与第三方UI库集成
05-28
@ spyke / react-hook-router-link 从react-router的逻辑中摘录的内容，可以更轻松地与第三方UI库集成。 如果您使用的是UI库并希望呈现链接，则一开始您可能会提出以下建议： 这种方法的问题可能是，您将失去...
router-link怎么使用
最新发布
weixin_73060959的博客
08-11 497
是 Vue Router 提供的一个组件，用于在 Vue 应用中创建导航链接。当点击时，它会根据to属性指定的路由地址（或路径名）来导航到对应的页面。这样做的好处是，它可以自动处理 URL 的更新和页面的渲染，而不需要你手动编写 JavaScript 代码来控制这些。
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-...
Vue 标签router-link 作用、用法
A乐神的博客
01-18 4999
Vue 标签router-link 作用、用法
【router-link详细介绍】
cz88888888666的博客
01-20 5391
是一个用于在 Vue 应用中创建导航链接的组件，由 Vue Router 提供，这个组件用于在不刷新页面的情况下导航到不同的 URL，并且支持 HTML History API，使用。不仅仅是一个链接，还能够根据当前路由的状态调整样式，比如当链接指向当前路由时，可以自动设置一个激活状态的样式类。此属性必须设置，它决定了导航的目标路由，其值可以是一个字符串或者一个对象，当使用对象时，可以设置更多选项如。的默认值，可以通过这个 prop 设置，当链接的完整路径完全匹配当前路径时应用的 CSS 类名。
【JavaScript源代码】Vue router-view和router-link的实现原理.docx
12-29
例如，下面的代码片段展示了 `<router-link>` 的基本用法： ```html <router-link to='home'>首页</router-link> <router-link to='about'>关于</router-link> ``` 在渲染时，Vue Router 会将 `<router-link>` 组件...
详解vue-router 2.0 常用基础知识点之router-link
12-09
此外，除了`router-link`，我们还可以使用`router.push()`方法来导航，例如： ```javascript router.push({ name: 'detail', params: { id: this.$route.params.id } }); ``` 总结起来，Vue Router 2.0 中的`...
解决Vue router-link绑定事件不生效的问题
10-15
在这里，我们使用了@click.native来修饰click事件，这样click事件就会按照原生的事件进行处理，当点击router-link时，就会触发组件内的nav_click方法。 解释这一点时，需要注意的是，虽然router-link看起来是一个...
Vue Router的基本使用、router-link以及router-link-active
drhnb的博客
07-10 7154
在Vue中，可以使用Vue Router来实现路由功能。Vue Router是Vue.js官方提供的一个插件，用于实现前端的路由管理。 使用Vue Router可以将不同的页面映射到对应的URL路径，并通过URL的变化在不刷新页面的情况下展示不同的内容。这样可以实现单页应用（SPA）的效果，让用户在页面之间进行无刷新的导航操作。
router-link的使用以及注意事项
amyzhou11的博客
05-07 1074
一、安装yarn add vue-router 二、全局引入 import vueRouter from ‘vue-router’ import router from ‘./router.js’ //单独写的路由 Vue.use(vueRouter) new Vue({ render: h => h(App), router:router //路由挂载，十分重要，不然会报错 ...
router-link的学习使用
小羽童鞋的技术笔记
09-27 695
组件支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的  标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。
router-link的使用方法
weixin_30374009的博客
09-20 359
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta content="" name="Keywords"> <meta content="" name="description"/> <title></t...
vue的router-link(路由)的详细使用---router的跳转
热门推荐
weixin_45667289的博客
03-08 4万+
1.在相关页面使用router-link （其中的to中的内容是指转向的页面） 2.在components文件下添加A.vue 和B.vue 文件（在其他文件下添加也可以，只要修改后面路径就好） 3.在index.js 文件中导入相关路径 （import … from …） 4.并在index.js文件中填写相关path： 5.成功展示 6.设置返回（rounter-link的to处只要填写 / 就可以返回到首页）（可要可不要） 使用路由和a标签的区别： 标签定义超链接，用于从一张页面链..
Vue中router路由的使用、router-link的使用（在项目中的实际运用方式）
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
07-03 880
Vue中router路由的使用、router-link的使用
Vue 路由的基本使用
weixin_30247781的博客
07-30 257
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
vue的router-link的使用
Heart_At_You的博客
03-02 381
文章初附给大家一个相关router-link官方文档中的介绍： https://router.vuejs.org/zh/api/#router-link 实际使用场景以及遇到问题的解决： 一般使用方式 &lt;router-link tag="li" :to="\next"&gt; &lt;a&gt;点击跳转&lt;/a&gt; &lt;/router-li...
vue 使用router-link和this.$router打开新的页面
xh1506101064的博客
08-27 2483
router-link this.$router
router-link用法
06-03
使用 `router-link` 组件的方式如下： ```html <router-link to="/home">Home</router-link> ``` 上面的代码中，`to` 属性指定了链接要导航到的路由路径。在这个例子中，我们将链接导航到 `/home` 路由。 如果想...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值