How to implement navigation with ElementUI in vue-router
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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

The vue-router error "NavigationDuplicated:Avoidedredundantnavigationtocurrentlocation" encountered in the Vue application – how to solve it? Vue.js is becoming more and more popular in front-end application development as a fast and flexible JavaScript framework. VueRouter is a code library of Vue.js used for routing management. However, sometimes

The horizontal figure 8 on the navigation map means haze, moderate is a yellow 8 warning signal, and severe is an orange 8 warning signal.

Both Android and iOS versions of Baidu Map App have released version 18.8.0, which introduces the traffic light radar function for the first time, leading the industry. According to the official introduction, after turning on the traffic light radar, it supports automatic detection of traffic lights while driving without having to enter a destination. Beidou High-Precision can position in real time. , 1 million+ traffic lights across the country automatically trigger green wave reminders. In addition, the new function also provides full silent navigation, making the map area more concise, key information clear at a glance, and no voice broadcast, allowing the driver to focus more on driving. Baidu Maps will launch a traffic light countdown function in October 2020, supporting real-time countdown prediction. Judgment, the navigation will automatically display the remaining seconds of the countdown when approaching a traffic light intersection, allowing users to always grasp the road conditions ahead. Traffic light countdown to December 31, 2022

This article will give you a detailed explanation of the Vue-Router in the Vue family bucket, and learn about the relevant knowledge of routing. I hope it will be helpful to you!

The football navigation voice package in the "Amap Navigation" software is one of the navigation voice packages for the car version of the Amap map. The content is the navigation voice of Huang Jianxiang's football commentary version. Setting method: 1. Open the Amap software; 2. Click to enter the "More Tools" - "Navigation Voice" option; 3. Find "Huang Jianxiang Passionate Voice" and click "Download"; 4. On the pop-up page, click " Just use voice".

Vue and Vue-Router: How to share data between components? Introduction: Vue is a popular JavaScript framework for building user interfaces. Vue-Router is Vue's official routing manager, used to implement single-page applications. In Vue applications, components are the basic units for building user interfaces. In many cases we need to share data between different components. This article will introduce some methods to help you achieve data sharing in Vue and Vue-Router, and

According to news from this site on April 29, Amap officially announced the launch of an upgraded version of driving ETA (Note from this site: ETA is the estimated time of arrival, which refers to the estimated time it will take for the user to depart from the current moment and follow a given route to the destination. ) service, which aims to help users make more accurate route planning duration and traffic condition estimates, and assist users in making travel decisions. This map application is the latest upgraded Amap App. It introduces the "ultra-large-scale graph convolutional neural network model", which can better capture and learn traffic flow patterns, support urban road networks and highway systems, and can Accurately depict the spatiotemporal dynamic changes of traffic conditions. In addition, the new version of the map further integrates the iTransformer time series prediction model to support real-time analysis.

1. Style modularization In a single CSS file, we write the style of the component in the style tag. You can see that generally the style tag will have a scoped attribute. This can achieve the same selector for different components in real time, but the styles will not interfere with each other. . Let's look at an example. We define a hello-world-box class in both components and set different styles in the corresponding scope tags. As you can see, vue adds a unique attribute (PostCSS translation implementation) to the labels in different components. Then, through the attribute selector, the label styles of different attributes do not interfere with each other. The role of the css attribute selector is to set styles for HTML elements with specific attributes.
