Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to set the vue-router-link selection style". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to set the vue-router-link selection style.

Vue-router-link Select the first style setting

Add the property active-class='ative' on the router-link component

Set the .actve style in css

The second kind

Write style router-link-exact-active in css

Home page about us import'@ / util/animate.min.css' / / import Classstyle from'@ / components/Classstyle' export default {data () {return {}}, components: {/ / Classstyle}} * {margin: 0; padding: 0 } .nav {text-align: center; margin: 0 auto;} .nav a {padding: 50px;} .nav a.router-link-exact-active {background-color: orange; color: # fff;} the difference between hash and history 1.hash

Although hash appears in URL, it is not included in the HTTP request and has no impact on the back end at all, so changing hash does not reload the page.

In hash mode, only the content before the hash symbol is included in the request, such as http://www.npc.com, so for the backend, 404 error will not be returned even if the route is not fully covered.

The new value of the hash setting must be different to trigger the action to add the record to the stack.

Hash can only modify the part that follows #, so you can only set the URL of the same document as the current URL.

Hash can only add short strings.

2.history (only effective in server environment)

The new URL set by pushState () can be any URL of the same origin as the current URL

The new URL set by pushState () can be exactly the same as the current URL, which also adds records to the stack

PushState () can add any type of data to the record through the stateObject parameter

PushState () can set the title property in addition for later use.

Take advantage of the new pushState () and replaceState () methods in HTML5 History Interface. (requires specific browser support).

In history mode, the URL of the front end must be the same as the URL that actually initiates the request to the backend, such as http://www.abc.com/book/id. If the backend lacks routing processing for / book/id, a 404 error will be returned. As described on the Vue-Router website: "however, in order to play this mode well, you also need backend configuration support."... so, you need to add a candidate resource that covers all situations on the server side: if the URL does not match any static resources, you should return the same index.html page, which is the page on which your app depends. "

Link style settings for vue-router

It is found that there will be an underscore on the text after router-link is added, and open the debugging tool to find that router-link is actually implemented by a, when reset

A {text-decoraction: none;}

As for the style after clicking, it is router-link-active

Router-link-active {text-decoration: none;} so far, I believe you have a deeper understanding of "how to set the vue-router-link selection style". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.