分类：router-link

2021
03-09

Vue router-view和router-link的实现原理

使用<divid="app"><router-linkto='home'>首页</router-link><router-linkto='about'>关于</router-link><router-viewa=1><router-view/></div>router-view组件exportdefault{//函数式组件没有this不能new没有双向数据绑定，通常用的比较少，比较适用于展示详情页因为详情页只展示不进行修改等操作，函数式组件比有状态的组件更加轻量级。functional:true,render(h,{parent,data}){parent表示的父组件appd... 继续阅读 >

2020
11-13

Vue 列表页带参数进详情页的操作(router-link)

首先，仔细看文档！！！一点一点的踩坑过来的~~~这里介绍params和query两种方法1.用params传参列表页：<router-link:to="{name:'msgDetail',params:{id:item.msg_id}}">（注意：用params传参这里是命名路由，用name）</router-link>路由配置如下：exportdefaultnewRouter({routes:[{path:'/msgDetail/:id',name:'msgDetail',component:msgDetail}]详情页接收参数：this.$route.params.id（注意：这里是$route，... 继续阅读 >

2020
11-06

vue router-link 默认a标签去除下划线的实现

我就废话不多说了，大家还是直接看例子吧~.router-link-active{text-decoration:none;}vue的router-link默认的a标签点击会有一个阴影补充知识：vue-router更改router-link点击时样式默认类：router-link-active：可以通过在样式表中重新定义基类：linkActiveClass：在创建路由时进行全局配置，linkActiveClass：/配置自定义类/以上这篇vuerouter-link默认a标签去除下划线的实现就是小编分享给大家的全部内容了，希望能给大家一... 继续阅读 >

2020
11-06

Nuxt.js nuxt-link与router-link的区别说明

前言在使用Nuxt.js时可能会遇到一个这样的问题？当打开请求页面的时候，所有页面都被请求了。这正是<router-link>组件所有的特性。首先说一下router-linkrouter-link<router-link>是使vue项目具有路由功能的应用点击组件。nuxt-link先看一下官方api介绍<nuxt-link>正如官方所说<nuxt-link>使用方式和用途<router-link>是一致的。但，后面说将来我们会为<nuxt-link>组件增加更多的功能特性，例如资源预加载，用于提升nuxt.js应用... 继续阅读 >

2020
10-08

详谈vue中router-link和传统a链接的区别

Vue-router是伴随着Vue框架出现的路由系统，它也是公认的一种优秀的路由解决方案。在使用Vue-router时候，我们常常会使用其自带的路径跳转组件Link,通过实现跳转，这和传统的何其相似！但它们到底有什么具体的区别呢？官方中给出的解释是这样的：<router-link>比起写死的<ahref="..."rel="externalnofollow"rel="externalnofollow">会好一些，理由如下：无论是HTML5history模式还是hash模式，它的表现行为一致，所以... 继续阅读 >

2020
10-08

解决Vue router-link绑定事件不生效的问题

解决方法：加native<router-linkto="/date"@click.native="nav_click">最新</router-link>methods:{nav_click:function(){console.log(1)}}解释：1：因为它是自定义标签，根本就没有事件和方法，所以不触发，加个native就是告诉vue这个标签现在有主了它是H5标签可以加事件了。2：父组件要想在子组件监听自己的click事件就得加native，router-link是标签啊。哪里有父组件？？？？router-link其实就是一个封装好... 继续阅读 >