Vue Learning - VueRouter Routing Basics

1. VueRouter

1. Description

It feels natural to create single-page applications with Vue.js + Vue Router: with Vue.js , we can already compose applications by combining components. When you want to add Vue Router to it, all we need to do is map components to routes and then tell Vue Router 在where to render them. Routes are essentially hyperlinks.

2. Rendering of selected route:

(1) router-link-exact-active class

When routing to a certain place, the class name is added to the corresponding routing tag.
For example: When you click About, the route jumps to the page corresponding to About.

(2) router-link-active class

In routing, the path setting of the child route (for example: http://localhost/home) includes the path setting of the parent route (for example: http://localhost/). Then when the child route is clicked, when router-link-active class is added to the child route, the parent route also has router-link-active class. That is, when you click the (http://localhost/home) route, both routes are selected.

3. Basic working principle

Introduce router-link in the html part of vue (similar to the principle of a), the to attribute is the vue component to be jumped, 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!

2. 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 and the other is about interface. The paths are '/' and '/about' respectively.

Open 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 two route navigations: Home and About .

4. Create a new route

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

Create four new vue files, corresponding to four routes.

Configure the routing index.js file

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

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link>
      <router-link to="/message">message</router-link>
      <router-link to="/goodcar">Shopping Cart</router-link>
      <router-link to="/me">My</router-link>
    </div>
    <router-view/>
  </div>
</template>

<style>
#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;
}
</style>

result:

So we understand the basic concept of routing and its configuration and its functions.

This is the end of this article about Vue Learning - VueRouter Routing Basics. For more relevant VueRouter Routing Basics content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!