search
HomeWeb Front-endJS TutorialHow to implement navigation with ElementUI in vue-router
How to implement navigation with ElementUI in vue-routerJun 06, 2018 am 10:53 AM
elementuivue-routernavigation

Below I will share with you an example of vue-router working with ElementUI to implement navigation. It has a good reference value and I hope it will be helpful to everyone.

Routing is indispensable in every project. I recently learned to use vue-router and ElementUI to implement a navigation bar. I encountered a problem during the learning process: after clicking refresh on the browser, the page stayed at The original location, but the navigation is the first one by default.

Since I have not been exposed to the front-end for a long time, I am not very clear about the concept of routing. After writing according to the document, I have no idea how to start. I asked my colleagues for advice. The solution of my colleagues is to use vuex management, but vuex I haven't been exposed to it yet, so this problem has been put on hold. I was studying at home this weekend and accidentally found out that I could use $route.path to set the default selected navigation. However, after setting it, it had no effect. When refreshing, the page still stays at the original position, and the navigation But none of them were selected, and I couldn't find the answer after searching the information for a long time. Later, I compared it with an example on the Internet and found that a binding symbol needs to be added in front of

default-active="$route.path"

, as follows:

:default-active="$route.path"

So After setting up, the navigation and page can be changed at the same time.

Please look here for the complete navigation code:

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed interpretation of the use of this.$emit in vue.js

How to implement passwords in vue Show hide switching function

How to use parent component to call child component events in Vue

The above is the detailed content of How to implement navigation with ElementUI in vue-router. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Vue应用中遇到vue-router的错误“NavigationDuplicated: Avoided redundant navigation to current location” – 怎么解决?Vue应用中遇到vue-router的错误“NavigationDuplicated: Avoided redundant navigation to current location” – 怎么解决?Jun 24, 2023 pm 02:20 PM

Vue应用中遇到vue-router的错误“NavigationDuplicated:Avoidedredundantnavigationtocurrentlocation”–怎么解决?Vue.js作为快速而灵活的JavaScript框架在前端应用开发中越来越受欢迎。VueRouter是Vue.js的一个代码库,用于进行路由管理。然而,有时

一文深入详解Vue路由:vue-router一文深入详解Vue路由:vue-routerSep 01, 2022 pm 07:43 PM

本篇文章带大家详解Vue全家桶中的Vue-Router,了解一下路由的相关知识,希望对大家有所帮助!

vue3项目怎么使用样式穿透修改elementUI默认样式vue3项目怎么使用样式穿透修改elementUI默认样式May 12, 2023 pm 02:34 PM

一、样式模块化在css单文件中,我们在style标签中写组件的样式,可以看到,一般style标签都会带上一个scoped属性,这样可以实现及时不同组件选择器一样,但是样式互不干扰。看一个例子,我们在两个组件中都定义一个hello-world-box类,在对应的scope标签中设置不同的样式。可以看到,vue为我们在不同的组件中的标签上加上了一个独有的属性(PostCSS转译实现)。然后通过属性选择器,实现不同属性的标签样式互不干扰。css属性选择器的作用是:为带有特定属性的HTML元素设置样式.

Vue-Router: 如何使用路由元信息来管理路由?Vue-Router: 如何使用路由元信息来管理路由?Dec 18, 2023 pm 01:21 PM

Vue-Router:如何使用路由元信息来管理路由?简介:Vue-Router是Vue.js官方的路由管理器,它可以帮助我们快速构建单页应用程序(SPA)。除了常见的路由功能外,Vue-Router还支持使用路由元信息来管理和控制路由。路由元信息是可以附加到路由上的自定义属性,它可以帮助我们实现一些特殊的逻辑或者权限控制。一、什么是路由元信息?路由元信息是

在Vue应用中使用vue-router时出现“Error: Failed to resolve async component: xxx”怎么解决?在Vue应用中使用vue-router时出现“Error: Failed to resolve async component: xxx”怎么解决?Jun 24, 2023 pm 06:28 PM

在Vue应用中使用vue-router是一种常见的方式来实现路由控制。然而,在使用vue-router的时候,有时候会出现“Error:Failedtoresolveasynccomponent:xxx”的错误,这是由于异步组件加载错误导致的。在本文中,我们将探讨这个问题,并提供解决方案。理解异步组件加载原理在Vue中,组件可以被同步或异步地创建

在Vue应用中使用vue-router时出现“Error: Avoided redundant navigation to current location”怎么解决?在Vue应用中使用vue-router时出现“Error: Avoided redundant navigation to current location”怎么解决?Jun 24, 2023 pm 05:39 PM

在Vue应用中使用vue-router时,有时候会出现“Error:Avoidedredundantnavigationtocurrentlocation”的错误信息。这个错误信息的意思是“避免了到当前位置的冗余导航”,通常是因为重复点击了同一个链接或者使用了相同的路由路径导致的。那么,怎么解决这个问题呢?使用exact修饰符在定义router

在Vue应用中使用vue-router时出现“Uncaught TypeError: Cannot read property 'push' of undefined”怎么解决?在Vue应用中使用vue-router时出现“Uncaught TypeError: Cannot read property 'push' of undefined”怎么解决?Aug 18, 2023 pm 09:24 PM

最近我尝试在Vue应用中使用vue-router,但遇到了一个问题:“UncaughtTypeError:Cannotreadproperty'push'ofundefined”。这个问题的原因是什么,以及如何解决呢?首先,让我们了解一下vue-router。vue-router是Vue.js官方的路由管理插件,可以帮助我们构建单页应用(SPA

怎么用elementUI+Springboot实现导出excel功能怎么用elementUI+Springboot实现导出excel功能May 18, 2023 pm 07:19 PM

步骤依赖包首先,我们需要引入vue的依赖包我用的是这个npminstallxlsx@^0.16.0npminstallfile-saver@^2.0.2其中xlsx依赖的作用为:将数据进行处理为excel工作簿file-saver依赖的作用为:将文件进行一个保存导出来element表格table这里,实际上是用的elemenetUI的表格table标签,获取到数据,因此,我们需要对表格添加一个选择器在我的项目中,我是添加了一个id:exportExceltableData为自定义的接收后端传过来

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools