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

最新推荐文章于 2024-07-05 09:04:11 发布
原创 最新推荐文章于 2024-07-05 09:04:11 发布 · 2k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#web #vue #html #css #css3

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即可
在这里插入图片描述
路由选择的切换效果图：
在这里插入图片描述
在这里插入图片描述

【vue2第十五章】VueRouter 路由配置(VueRouter)与使用 和 router-link与router-view标签使用
weixin_72979483的博客
09-07 2634
Vue Router 是 Vue.js 官方提供的路由管理器。它能够帮助你在 Vue 单页面应用（SPA）中实现页面之间的导航和路由功能。它是一种映射关系，映射了页面组件与路径的关系。如何配置VueRouter 1. 下载vue-router因为它是一个单独的模块所以需要下载。 **vue2对应的vue-router版本是 vue-router3.x vue3对应的vue-router版本是 vue-router4.x** 使用npm下载：`npm install vue-router
详谈vue中router-link和传统a链接的区别
10-15
需要注意的是，当`<router-link>` 包含`<a>` 时，`<a>` 的点击事件会覆盖`<router-link>` 的导航行为，所以要妥善处理这种情况，确保正确的导航逻辑。 总的来说，`<router-link>` 是Vue Router为单页应用设计的智能...
Vue 路由的使用及解决 router-link 点击事件无效问题
最新发布
My_wife_QBL的博客
07-05 2019
在routes: [path: '/',},});Vue Router 是 Vue.js 官方的路由管理器，它提供了丰富的功能来构建单页面应用。通过定义路由、创建路由实例、挂载路由实例以及在模板中使用和，我们可以轻松实现页面导航和视图切换。在上添加点击事件时，可以使用.native修饰符监听原生点击事件，或者使用@click监听点击事件并调用阻止默认行为，然后手动执行路由跳转。希望本文能够帮助你全面理解 Vue Router 的使用方法，并解决在上添加点击事件无效的问题。
electron-vue项目，点击事件怎么没反应
程旭清的博客
05-14 2759
这是一个vue文件 <template> <div style="background-color: #EBEBEB;min-height:800px"> <div style="width:100%;background-color: #636363; overflow: hidden"> <span class="demonstration"...
vue指令修饰符
weixin_68658847的博客
12-28 626
vue指令修饰符
router-link 点击事件失效
曹曹的博客
07-24 2919
router-link会阻止click事件（只用@click不用@click.native,事件是不会触发的) //以下addUserName点击函数无效 <router-link to="/Home" @click="addUserName">Go to the Home</router-link> 解决方法:将@click改为@click.native //...
vue router-link添加点击事件无效
HELLO WORLD
05-27 3299
本文知识点比较简单，只要面向新人解惑，vue高手请忽略。 在vue实际开发中可能会遇到比较常见的问题之一：router-link添加点击事件无效。 这是为什么呢？ 请看下文
解决Vue router-link绑定事件不生效的问题
10-15
在使用Vue.js开发Web应用时，经常会用到Vue Router来管理路由，其中router-link是Vue Router提供的一个组件，用于在页面上生成导航链接。然而在某些情况下，我们可能会遇到router-link绑定事件不生效的问题。以下...
vue路由 遍历生成复数router-link的例子
10-16
在本篇关于Vue路由的文章中，我们了解到在使用Vue CLI创建单页面应用（SPA）时，经常会需要顶部导航栏来控制下方内容栏的页面内切换，这就需要用到Vue-router，它是Vue.js的一个插件，用于构建SPA。 首先，要使用...
vue中＜router-link＞＜/router-link＞添加点击事件
fanyanjiang的博客
08-07 3500
点击事件失败原因： router-link会阻止click事件，你可以试试只用click不用native,事件是不会触发的。而a标签不会阻止。 在vue学习中遇到给router-link 标签添加事件@click 、@mouseover等无效的情况 解决方案： 根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。 所以如果在想要在router-link上添加事件的话需要@clic
关于给router-link添加点击事件失效的解决方法
weixin_46212682的博客
03-28 1984
在router-link标签中，仅仅用于路由的切换，而router-link会阻止其他的点击事件的存在，加上native的作用是：给组件绑定原生事件 <router-link to="/" @click.native="muenSwitch(index)"> 首页 </router-link> 这样你就可以点击到相应的事件了 ...
router-link加上点击事件
公z号：职场爱学习
06-23 3111
必须加上native。如果需要做比较特殊的功能，建议使用其它dom元素来实现。 <router-link @click.native="">
router-link 自定义点击事件
weixin_33924220的博客
09-25 817
&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 点击事件请求
dazhi1770的博客
09-11 289
<span>用户登陆</span> </div> <formaction="https://api.it120.cc/small4/user/m/login?deviceId=007&deviceName=monkey"method="post"&g...
Vue 的router-link 标签添加事件
Jay的博客
01-18 2872
前言 在vue 的开发中，对router -link 的使用是不可避免的。有时候，我们需要对router-link 添加事件。正好，前段时间，我就遇到这样的需求。当我写下以下代码时，无论我怎么点都没有反应。 <router-link @click="isFinish()">link</router-link> 最后，百度了才知道，必须给事件添加修饰符.native 事...
vue router-link 添加点击事件
u011280778的博客
09-04 3341
在vue学习中遇到给router-link 标签添加事件@click 、@mouseover等无效的情况 我想要做的是v-for遍历出来的选项卡， 鼠标移上去出现删除标签，移除标签消失的效果 原代码： <router-link v-for="(item, index) in pageMenuList" :to="{ path: item.listLink }" @mouseove...
vue-cli项目中，rouer-link点击后无效
吟游诗人——吟唱生命的不朽
04-15 606
【已解决】 昨日，重构我的vue-cli项目，但是在使用router-link时发现，无论如何点击其都不起反应。 症状： 鼠标左键点击无效 鼠标移上后，（谷歌）浏览器左下角正常显示链接网址 网页解析正常，<routetr-link>标签被解析成了a标签，且与正常a标签无异 console中无异常 鼠标中建点击（新页面打开）能够正常打开其对应的网页 相...
Vue学习笔记（八）——router绑定事件不生效的解决方案
讨厌走开啦
04-02 3107
参考文档一：https://cn.vuejs.org/v2/guide/ 参考文档二：https://www.cnblogs.com/minghui007/p/7263177.html 对初学者来说，使用路由后遇到的第一个问题通常是尝试在路由跳转时执行定义的函数，但是发现路由跳转时函数没有执行，类似下面这样的代码： <!DOCTYPE html> <html lang="en"&...
vue 的 router-link 添加点击事件
肖的博客
11-21 3382
根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。 所以如果在想要在router-link上添加事件的话需要@click.native这样写 ...
vue3后台项目 如何使用router-link实现路由跳转功能
05-23
在Vue3中，使用`router-link`实现路由跳转功能需要三个步骤： 1. 安装Vue Router 在项目中安装Vue Router： ``` npm install vue-router@4.x --save ``` 2. 配置路由 在`src`目录下创建一个`router`文件夹，并...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值