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

This article mainly introduces the relevant knowledge of how vue routing traverses to generate plural router-link, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this article on how to traverse vue routing to generate plural router-link. Let's take a look.

Requirements: the top navigation bar controls the lower content bar to switch within the page.

There is no doubt that vue-router is well suited to such requirements, and it is not complicated to implement:

1 、 main.js:

Import VueRouter from 'vue-router'Vue.use (VueRouter)

2. Define (routing) components:

Import songList from'. / components/songList.vue' const Bar = {template: 'no.2'} const Baz = {template:' no.3'} const Fun = {template: 'no.4'}

The components here can also be imported from the outside, which should be the right thing to do. The blogger wrote it directly in order to demonstrate it.

3. Define routes:

Const routes = [{path:'/ new song', component: songList}, {path:'/ ranking', component: Bar}, {path:'/ list', component: Baz}, {path: / singer', component: Fun}, {path:'*', redirect: / new song'}]

Note that a redirect route is finally set up to match to the 'new song' page when the path does not belong to any of the above; to put it bluntly, it is to set the route for the initial page.

4. Create a router instance:

Const router = new VueRouter ({routes// equivalent routes: routes})

5. Create and mount the root instance:

New Vue ({router, el:'# app', render: h = > h (App)})

NavBar.vue:

On the component page, it is common sense to write a specific number of navigation tags, similar to the following:

Single singer on the new song chart

But there is a small problem in practical application, that is, is it really necessary to write each of the repeated routing entrances like this? The only difference is the to attribute.

What if we encounter a dozen or twenty in the future?

So try to traverse the array to generate multiple routing entries:

{{bar}}

Roughly as above, title is an array of all titles: [new songs, rankings, lists, singers,...], and the Index index is used to bind key values. The only question now is how to write the to, that is, the routing entry path.

Because each will be rendered as a different exit, it cannot be written as an absolute path.

Scheme 1: change all the paths in main.js into names in title, and then use concatenated strings to achieve dynamic matching in to.

In practice, it is found that it is not desirable, because only the contents in double quotes in to= "" can be recognized in html, let alone the splicing symbols that can only be recognized by js such as'+'.

Option 2: use programmatic navigation

Methods: {linkChange: function (bar) {this.$router.push ({path:'/'+ bar});} {{bar}

By writing the path in methods, this method can use the values obtained each time the array is traversed, thus achieving dynamic matching.

Why add the native suffix to the click event?

Here is a typical router-link pit, because the browser will render the router-link as a tag, then the events added to the router-link will be invalidated.

The solution is to add a. Native suffix to prevent native events.

But this approach also has a serious BUG, that is, the use of programmatic navigation in traversal will cause all entries to respond to this click event!

Specifically, when a user clicks on a route, all entries will be recognized by vue as selected routes, and the page logic may not be able to see it.

However, as long as you add a .router-link-active {background: # f4f4f4}, this kind of vue sets a background color to the default added class of the current route, all the route entry elements can be found.

Change color together!

This bug will not appear when routing the span without traversal. I hope you can tell me the specific reason.

So this plan can only be abandoned.

Option 3:

Bind the to property in html

{{bar}}

Think of too many complex solutions, but ignore the most basic binding to attribute

The most convenient place is that the full path can be written in curly braces like me, or it can be written directly as: to= "{path: bar}". The effect is the same.

And compared with the previous method, we can save the additional click events and make use of its own path characteristics to complete.

So far, the requirements are basically complete, but can the details be more perfect?

For example, we wrap the router-link rendered as a tag with a span tag. Sometimes we want the selected tag font to turn blue, while a blue border appears under the span.

Improve the user experience. So using .router-link-active to change the a tag color is the most convenient, the question is how to add styles to the higher-level span?

It seems impossible to achieve the function without adding additional class or id, but I saw a sentence on the vue website: "sometimes we want the 'activated CSS class name' to be applied to the outer element instead of the tag itself, so we can render the outer element and wrap the inner native tag."

The code is as follows:

{{bar}}

Use the tag tag to change its rendering elements to wrap the a tag. In this way, .router-link-active adds a span bottom border, .router a to change the font color. You do not need to use additional tags to complete the style requirements.

This is the end of the article on "how to traverse vue routes to generate plural router-link". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to traverse vue routes to generate plural router-link". If you want to learn more, you are welcome to follow the industry information channel.

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.