vue路由的使用以及如何解决在router-link上添加点击事件无效的情况

最新推荐文章于 2023-10-03 23:04:48 发布
最新推荐文章于 2023-10-03 23:04:48 发布
阅读量1.9k 收藏 2
点赞数 2
文章标签： web vue html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Maximum_Patrick/article/details/111364152
版权

vue路由的使用以及如何解决在router-link上添加点击事件无效的情况

一、vue路由的使用
首先要去npm商店下载安装vue-router，安装好之后新建router.js文件将vue-router引入
在这里插入图片描述
第二步，将所有你需要使用路由跳转的页面引入
在这里插入图片描述
第三步，使用路由
在这里插入图片描述
第四步，定义一个router将路径、名称、组件名存入
在这里插入图片描述
第五步，记得将路由导出，这样main.js中才能导入
在这里插入图片描述
最后，在main.js中进行导入，在对应页面就可以用router-link进行路由选择了
在这里插入图片描述
使用方法：
在对应页面使用router-link标签，to填入在router.js中配置的path路径即可
在这里插入图片描述
这一步完成后不要忘了添加router-view进行渲染，不然显示不了路由选择后的页面
在这里插入图片描述

二、如何解决在router-link上添加点击事件无效的情况
直接在router-link上添加@click事件是无效的，需要在其后面加上.native即可
在这里插入图片描述
路由选择的切换效果图：
在这里插入图片描述
在这里插入图片描述

花果山的小喽啰
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
router-link不识别
weixin_42600128的博客
02-16 778
router-link是Vue.js中的一个组件，它用于实现页面跳转和路由功能。如果你的代码中出现了“router-link不识别”的错误，可能是以下原因之一： 你没有正确引入Vue.js的router模块。在使用router-link之前，需要在代码中引入Vue.js的router模块，否则Vue.js无法识别router-link组件。 你的代码中存在拼写错误。请检查代码中是否有拼写错误，...
Vue 的router-link 标签添加事件
Jay的博客
01-18 2728
前言 在vue 的开发中，对router -link 的使用是不可避免的。有时候，我们需要对router-link 添加事件。正好，前段时间，我就遇到这样的需求。当我写下以下代码时，无论我怎么点都没有反应。 <router-link @click="isFinish()">link</router-link> 最后，百度了才知道，必须给事件添加修饰符.native 事...
点击router-link时候会发生什么？
最新发布
思索的涟漪，突破自我
10-03 1227
会触发Vue Router的导航流程，这个过程包括了路由匹配、权限验证、钩子函数的执行等一系列操作，最终将目标组件渲染到页面中。: Vue Router会将解析得到的目标路由与路由配置中的规则进行匹配，以确定最终前往哪个路由。: 如果一切正常，Vue Router将根据匹配到的目标路由，执行页面的切换操作。: Vue Router会拦截这个点击事件，阻止浏览器默认的页面跳转。），Vue Router会依次执行这些操作，以决定是否允许导航。属性，这个属性指定了目标路由的路径或命名路由。
vue 路由 router-link 添加事件
qq_43617532的博客
02-25 188
给导航栏添加鼠标移入 与 已移出 需要给事件添加.native 如 @mouseover.native
router-link 自定义点击事件
weixin_33924220的博客
09-25 703
&lt;li v-for="(item, index) in menuList"&gt; &lt;router-link class="classify" tag="div" :to="{path: item.listLink}" @click.native="clkTag(index)"&gt; &lt;!-- 默认 event="clic
vue路由 遍历生成复数router-link的例子
10-16
今天小编就为大家分享一篇vue路由 遍历生成复数router-link的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详谈vue中router-link和传统a链接的区别
10-15
需要注意的是，当`<router-link>` 包含`<a>` 时，`<a>` 的点击事件会覆盖`<router-link>` 的导航行为，所以要妥善处理这种情况，确保正确的导航逻辑。 总的来说，`<router-link>` 是Vue Router为单页应用设计的智能...
详解vue-router 2.0 常用基础知识点之router-link
12-09
前端采用前后端分离的方式进行开发，我们使用vue2.0框架，做单页面应用难免会用到vue-router，今天把项目中的用到router-link摘出来，一是想整理一下这些用法，方便下次快速查找，二是重新再过一下vue-router，增加...
vue router-link传参以及参数的使用实例
01-19
<router to=”{path:’/test’,query:>跳转</router>(id是参数) 使用：this.$route.query.id ...<router to=”‘/test/...使用：this.$route.params.id（这个id给上图路由的配置有关） this.$route是一个数组，里面包含路
关于给router-link添加点击事件失效的解决方法
weixin_46212682的博客
03-28 1858
在router-link标签中，仅仅用于路由的切换，而router-link会阻止其他的点击事件的存在，加上native的作用是：给组件绑定原生事件 <router-link to="/" @click.native="muenSwitch(index)"> 首页 </router-link> 这样你就可以点击到相应的事件了 ...
【Vue项目】router-link跳转失败404
z5675678的博客
02-09 1659
处理进行跳转且传值过去时，未成功跳转且报404找不到页面问题
关于router-link 用@click.native点击事件进行页面跳转的问题
m0_37054603的博客
05-20 3963
情景：就是列表页使用上面方法进入详情页，返回的时候要再点进去的位置不能动，第一次可以没有问题，第二次点击去再出来页面就刷新了。 1.错误的方法 <router-link v-show="info" tag="li" v-for="(item,index) in arr" :key="index" :to = '{}' @click.native='go(item,index)'...
Vue学习笔记
weixin_43887870的博客
08-05 1238
VUE 插值操作 mustache语法（双大括号） 指令：v-one 作用：插值操作只执行一次，后续发生值发生变化，显示不变。 指令：v-html 作用：将语句内容转为HTML格式输出 <div id="app"> <h2 v-html="a"></h2> </div> <script> const vue = new Vue({ el: '#app', data:{
vue-cli项目中，rouer-link点击后无效
吟游诗人——吟唱生命的不朽
04-15 473
【已解决】 昨日，重构我的vue-cli项目，但是在使用router-link时发现，无论如何点击其都不起反应。 症状： 鼠标左键点击无效 鼠标移上后，（谷歌）浏览器左下角正常显示链接网址 网页解析正常，<routetr-link>标签被解析成了a标签，且与正常a标签无异 console中无异常 鼠标中建点击（新页面打开）能够正常打开其对应的网页 相...
router-link添加点击事件
THINK_OF_的博客
09-19 6086
&lt;router-link @click.native="doSomething" to="/a" &gt;&lt;/router-link&gt; 这样既可以跳转，点击事件也可以执行，做tab切换的时候可以用
Vue -- router-link(传参)
bobobocai的博客
12-14 1986
<router-link> 组件支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。 <router-link> 比起写死的 <a href="..."> 会好一些，理由如下： 无论是 HTML5 history 模式还是
表单点击事件不能及时渲染
qq_51586463的博客
01-02 290
表单中点击按钮不能输入框中不能及时生成相应的数据
【已解决】Vue的router-link地址变化但页面不刷新
蹦极的考拉
09-22 4450
由于最近搞了一般企业网站做练习，其中遇到各种的问题，今天无意中发现router-link点击产品的时候，列表页可以顺利进入详情页，但是详情页里面推荐产品却不能跳转。一般出现的情况：当前链接和政要点击的链接地址结构是一样的，就不能跳转了。（貌似是路由的过，因为路由结构本身没变化，所以网页不会刷新，而是变化的url而已）死活就是不跳转，但是url是变化的啊，抓耳挠腮大半天，查资料之后终于弄懂了这个问题。设置 router-view 的 key 属性值为 $route.fullPath。
Vue2中注册在router-link上事件无效解决方法
thinkingw770s的博客
08-22 1458
今天用vue在做一个tab栏切换的时候，偶然发现我绑定在router-link上的click并不会触发， 后来测试发现，所有绑定在router-link中的事件都不会促发 此后查看了官方的文档，也并没有给出明确的说明： 代码如下： &lt;router-link @click="change"&gt;&lt;span&gt;{{item.text}}&lt;/span&gt;&lt;/...
vue3后台项目 如何使用router-link实现路由跳转功能
05-23
在Vue3中，使用`router-link`实现路由跳转功能需要三个步骤： 1. 安装Vue Router 在项目中安装Vue Router： ``` npm install vue-router@4.x --save ``` 2. 配置路由 在`src`目录下创建一个`router`文件夹，并...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值