Example Analysis of the basis of VueRouter routing in vue

This article mainly introduces the example analysis of the basis of VueRouter routing in vue, which is very detailed and has a certain reference value. Interested friends must read it!

1. VueRouter

1. Description

Creating a single-page application with Vue.js + Vue Router feels natural: with Vue.js, we can already compose the application by combining components, and when you want to add Vue Router, what we need to do is map the components (components) to routes, and then tell Vue Router where to render them. Routing is essentially a hyperlink.

2. Render the selected route:

(1), router-link-exact-active class

When it is routed to, the class name is added to the corresponding routing label.

For example, when you click About, the route jumps to the page corresponding to About.

(2), router-link-active class

In a route, the path setting of the child route (e.g. http://localhost/home) contains the path setting of the parent route (e.g. http://localhost/), so when clicking on the child route, when you add the router-link-active class to the child route, the parent route also has the router-link-active class. That is, when you http://localhost/home a route, both routes have the effect of being selected.

3. Basic working principle

Router-link is introduced into the html part of vue (similar to the a principle). The to attribute is the vue component to jump, and router-view is responsible for displaying the content pointed to by the current route, so that a single page can also achieve the effect of page jump!

II. Actual combat

1. Create a vue project with router

2. Open the src/router/index.js file in the project

You can see that the project has automatically generated two routes, one is the home page home, and the other is the about interface. The paths are'/ 'and' / about', respectively.

Open the main.js in the root directory and you can see that routing is introduced in main.js, so routing can be used in all components.

3. Open the project in the browser

You can see the Home and About route navigation.

4. Create a new route

Write a route navigation similar to Taobao, including: home page, message, shopping cart and my four parts.

Create four new vue files and correspond to four routes.

Configure routing index.js Fil

Import Vue from 'vue'import VueRouter from' vue-router'import Home from'.. / views/Home.vue'Vue.use (VueRouter) const routes = [{path:'/', name: 'Home', component: Home}, {path:' / message', name: 'Message', component: () = > import (/ * webpackChunkName: "about" * /'. / views/Message.vue')} {path:'/ goodcar', name: 'GoodCar', component: () = > import (/ * webpackChunkName: "about" * /'. / views/GoodCar.vue')}, {path:'/ me', name: 'Me', component: () = > import (/ * webpackChunkName: "about" * /'. / views/Me.vue')}] const router = new VueRouter ({routes}) export default router

Configure the navigation bar in App.vue

Home page message shopping cart my # app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; text-align: center; color: # 2c3e50;} # nav {padding: 30px; margin: 0 auto; width: 30%; display: flex; justify-content: space-around;} # nav a {font-weight: bold; color: # 2c3e50 Text-decoration: none;} # nav a.router-link-exact-active {color: # 42b983;}

Results:

The above is all the contents of the article "sample Analysis of the basis of VueRouter routing in vue". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!