【vue系列】在router.js中使用ELEMENT组件

最新推荐文章于 2023-12-27 11:40:39 发布
最新推荐文章于 2023-12-27 11:40:39 发布
阅读量692 收藏
点赞数 1
分类专栏： vue.js 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AIB_Kasic/article/details/115358445
版权
本文档记录了一个基于Element-UI、Vue和Vue Router的项目中遇到的问题。作者试图在router.js文件内利用$confirm方法判断用户登录状态，但发现直接使用在router.js中无效。解决方案是通过将$confirm挂载到Vue原型上，即Vue.prototype.$confirm，以便在路由守卫或其他非组件上下文中调用。这个技巧对于处理全局提示和验证非常有用。
摘要由CSDN通过智能技术生成
我目前项目基于element-ui+vue+router架构的平台，我会每天总结一点遇到的坑和解决方案，以备后续查阅解决。

就如标题所示：在router.js里用elmentUI组件

需求是判断进入详情页的时候用户的登录状态，未登录就显示弹窗引导用户登录

使用到了 this.$confirm

但是这在router.js中行不通，需要这样使用
Vue.prototype.$confirm

土生土长的IU
关注
专栏目录
vue element-ui 三级路由 router.js的配置文件
weixin_41033048的博客
02-15 939
问题回顾： 我已经按照网上说的方法，配了很多的次内容，一直搞不清楚是什么问题？ 配了两个component:Layout，效果显示如下： 而如果去掉一个呢？就会变成这样 起码这个已经解决了导航条嵌套的问题，所以我们应该明白，问题出现在Layout的上面， layout这块是整个主页面的路由的， 解决方法： 新建vue槽，装子路由的内容 最后的代码如下： ...
vue-router配合ElementUI实现导航的实例
08-28
下面小编就为大家分享一篇vue-router配合ElementUI实现导航的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在router.js里用elmentUI组件和i18n的翻译
happy921212的博客
04-08 1292
我目前项目基于element-ui+vue+i18n+router架构的平台，我会每天总结一点遇到的坑和解决方案，以备后续查阅解决。 就如标题所示：在router.js里用elmentUI组件和i18n的翻译。 如果我们们集成的vue-router,在router文件夹里的index.js中是用不了this.$t('xxxxx')这样的翻译和this.$confirm()这样的组件的。 那怎...
Vue使用vue-router,Element
荡浪的个人博客
09-28 444
一、 Vue使用vue-router,Element 安装vue-router npm install vue-router@next --save 修改main.js import {createApp} from 'vue' import App from './App.vue' import router from './router' ​ const app = createApp(App) app.use(router) app.mount('#app') src目录下新建文件夹
【Vue篇】详解router路由 | element-ui组件 | 嵌套路由
小吉妙妙屋
12-27 2262
Vue Router是Vue.js官方提供的用于构建单页应用（SPA）的路由管理器。它能够集中处理应用程序中的路由跳转、参数传递、页面切换等功能，使得开发者可以轻松地实现前端路由功能。Vue Router具有以下特点：声明式路由配置：Vue Router使用声明式的方式配置路由，通过简单的配置项，可以定义页面路径、对应的组件以及其他相关信息。这种配置方式直观且易于维护。嵌套路由：Vue Router支持嵌套路由，即一个路由下面可以包含多个子路由，从而实现更复杂的页面结构和组织方式。
vue-router 与 elementUI导航栏 配合实现路由设置小技巧
github_39532240的博客
07-24 7295
{     path:'/home',     component:Home,     name:'导航一',     iconCls: 'el-icon-menu',     children: [       { path: '/table', component: table, name: '表格'},       { path: '/carousel', component:
管理系统系列--基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案。.zip
02-26
Vue.js 2.x 和 Element UI 是现代Web开发中构建高效、可维护的后台管理系统的热门技术栈。Vue.js，作为一款轻量级的前端框架，以其简洁的API、高效的虚拟DOM算法以及强大的组件化能力而受到开发者们的广泛青睐。而...
element、ant design、es6、echarts、vue.js、vueX、vue Route...等 离线包
07-12
标题中的“element、ant design、es6、echarts、vue.js、vueX、vue Route”是一系列前端开发中常用的技术栈，这些技术在构建现代Web应用时起着至关重要的作用。下面将对这些技术进行详细介绍。 1. **Element**：...
基于Vue+Vue-Router+Vuex+Element-ui+axios，参考小米商城，实现的电商项目。.zip
10-30
Vue.js是一个流行的前端JavaScript框架，以其轻量级、组件化、易学习和高性能的特点深受开发者喜爱。在这个项目中，Vue.js作为核心框架，用于构建用户界面。 首先，Vue-Router是Vue.js官方的路由管理器，它允许我们...
解决vue打包后vendor.js文件过大问题
10-16
其次，需要在项目中使用这些库的地方，注释掉原先的import引入语句。但是要注意，对于Vue插件（如VueRouter、Vuex、Axios等）的全局安装，依然需要保留`Vue.use()`的调用语句。对于Element-UI，则不要在Vue.use()中...
开发社团管理系统。前端使用vue、vue router、vue axios、element UI.zip
最新发布
03-09
在本项目中，开发团队构建了一个社团管理系统，其前端部分主要采用了Vue.js框架，结合了Vue Router、Vue Axios以及Element UI库。这是一个基于JavaScript技术的Web应用，利用现代Web技术来实现高效、可维护的用户...
Vue+Router+Element 简易导航栏
m0_54198676的博客
09-26 270
项目结构： 直接上代码：主要就是引入配置路由Router ①：引入Router（路由管理器） //config.js 页面 //导航栏 import Home from '../components/home' //首页 import Index from '../components/index' //视频平台 import Vid from '../components/vid_terrace' //其他页面 import Rests from '../components/re..
vue实例：element-ui导航栏通过vue-router配置多级导航菜单
duansamve的博客
04-22 1万+
{ path:'/home', component:Home, name:'导航一', iconCls: 'el-icon-menu', children: [ { path: '/table', component: table, name: '表格'}, { path: '/carousel', component: elC...
在Vue项目中使用Element组件
程序员大腾的博客
02-28 1228
记录如何在Vue项目中使用Element-ui组件
vue[elementUI导航切换以及路由router-link、router-view、router的使用]
热门推荐
墨水白云的博客
06-02 1万+
vue[导航切换router-link、router-view、router的使用]
Vue之Element-ui和Vue-cli的使用
IT之一小佬的博客
07-20 795
Element-ui 单文件组件就像是一个个封装好的页面样板，我们可一把这些样板组合在一起形成一个完整的页面。就像QQ空间装扮一样，将个个样板放入QQ空间页面中组成自己风格的页面。而Element-ui就将我们需要的样式封装成单文件组件，我们可以直接集成到我们的项目中。 在main.js中将emelent-ui引入到项目中 import Vue from 'vue' import App from './App.vue' import router from './router/rout
vue pc项目 router.js 配置详解 ，vue项目中路由懒加载的正确使用，vue实现动态路由一步到位
m0_49515138的博客
11-17 4413
这个是我之前一个项目的router.js 文件 xmjd 路由懒加载: 使用() => import();的方式导入组件 这样可以在进入当前路由的时候加载路由 如果不使用懒加载 会在第一次进入页面后 一次性加载所有路由 所以首屏加载会慢如果一个项目过大 大量的使用路由懒加载会导致页面的热更新过慢 推荐在开发环境下不使用懒加载 这样有利于开发的效率 在生产环境可以使用路由懒加载通过process.env.NODE_ENV可以访问到当前是什么环境 可以在utils文件夹下创建两个文件 util.import.
Vue项目配置router.js详细步骤
Huagg24的博客
11-28 3013
第一次写Vue项目，要用到router.js,看了一下官方文档，还是很懵逼，不知道怎么配置，又去看视频查资料，最后终于搞定了。话不多说，先上代码，我再讲一些要注意的细节一、第一次配置，还是花了一些时间理解的，这个router目前我来看作用就是在不刷新页面的情况下进行一个页面跳转，中途还出现了无法正常显示的情况，最后发现是版本问题。还好解决了。希望能帮助到大家。
Notice-Message消息提示
hrbsfdxzhq01的博客
01-25 1413
常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。 当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，设置type字段可以定义不同的状态，默认为info。此时正文内容以message的值传入。同时，我们也为 Message 的各种 type 注册了方法，可以在不传入type字段的情况下像open4那样直接调用。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值