[问题解决]vue <router-link>在浏览器上点击失效(路由不跳转)

问题引入

自己写的小demo中,引入mui.js并实现相关功能后,再点击底部的导航栏发现点击失效

如下所示,一个标准的路由使用,于chrome浏览器中点击失效,于IE和火狐上可以

<nav class="mui-bar mui-bar-tab">
  <router-link to="/home" class="mui-tab-item">
    <span class="mui-icon mui-icon-home"></span>
    <span class="mui-tab-label">首页</span>
  </router-link>
</nav>

解决方案一

将这种声明式的方式换成编程式的方式

<nav class="mui-bar mui-bar-tab">
  <router-link to="/home" class="mui-tab-item" @click.prevent="toHome">
    <span class="mui-icon mui-icon-home"></span>
    <span class="mui-tab-label">首页</span>
  </router-link>
</nav>
methods: {
  toHome() {
    this.$router.push("/home");
  }
}

解决方案二

看视频学习的时候,老师的解释是App.vue中的router-link身上的类名和mui-tab-item 存在兼容性问题,导致tab栏失效,可以把mui-tab-item改名为mui-tab-item-llb,并复制相关的类样式,来解决这个问题。

个人还是觉得第一种方案可行度高

原文地址:https://www.cnblogs.com/L-xmin/p/12496840.html

时间: 2024-10-10 20:55:28

[问题解决]vue <router-link>在浏览器上点击失效(路由不跳转)的相关文章

解决vue &lt;router-link&gt;在IE与火狐上点击失效(路由不跳转)问题

<router-link to="/GoAbroad"> </router-link> vue中的<router-link>这种声明式的路由方式在IE与火狐中有时会出现失效问题(目前我还不知道是什么原因导致的),但是我把这种声明式的方式换成编程式的方式就没有问题里,也就是下面这种: <button class="btn-card" @click="link1"> 刷卡登录 </button&g

Vue.js路由管理器 Vue Router

起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p>

vue router路由(三)

当环境搭建及Vue语法与指令都有所了解,该说下router. build目录是打包配置文件 (不建议动) config是vue项目基本配置文件 dist是构建后文件 js 手动创建 (根据需要) node_modules 根据package.json 安装依赖模块 src资源文件,基本文件都会放在这里 app.vue  父组件 main.js 入口文件 static构建好的文件会在这个目录 index.html 主页 1.首先安装路由通过npm: npm install vue-router 在

Vue.js系列之vue-router(上) (转载自向朔1992)

概述 Vue非常适用于实践单页面应用程序也就是平时大家说的比较多的SPA(single page application),这点应该了解过Vue的应该都知道吧.一般的单页面应用是基于路由或页面之间的链接来形成的,Vue是基于路由和组件的,所以我们今天就来了解下vue-router.vue-router是Vue.js官方的路由插件,它和vue.js深度集成,用于设定访问路径,并将路径和组件映射起来,我们给每个组件一个路由地址,跳转路由相当于组件切换.vue-router的内容还是比较多的,这里我只

一、Vue Router 的使用

什么是路由 路由是根据不同的url地址展示不同的内容或页面.可分为前端路由和后端路由. 后端路由:通过用户请求的url导航到具体的html页面:每跳转到不同的URL,都是重新访问服务端,然后服务端返回页面,页面也可以是服务端获取数据和模版组合,返回HTML,也可以是直接返回模版HTML,然后由前端再去请求数据,使用前端模版和数据进行组合,生成想要的HTML.(意味着,浏览器刷新页面.网速慢的话说不定屏幕全白再有新内容) 简单来说路由就是用来跟后端服务器进行交互的一种方式,通过不同的路径,来请求不

mui 时间日期控件(浏览器上无法查看,在手机端可以点击)

<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <link href="css/mui.mi

requirejs vue vue router简单框架

index.html 入口页面 <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title>vue</title>     <link href="../css/index.css" rel="stylesheet">     <script 

前后端分离,浏览器上传下载文件

服务器文件浏览器下载:vue请求:downloadService(){ this.$confirm('确认要下载吗?', '提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' }).then(() => { window.open(encodeURI( restoreService.geturl()+ '/asd/dasd?dsad)) window.close() }).catch(() => { t

Vue Router 路由守卫:完整的导航解析流程

完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). 5 在路由配置里调用 beforeEnter. 6 解析异步路由组件. 7 在被激活的组件里调用 beforeRouteEnter. 8 调用全局的 beforeResolve 守卫 (2.5+). 9 导航被确认. 10 调用全局的 afterEach 钩子. 11 触发 DOM 更新. 12 用