Vue Router is the official route manager of vue.js. Its deep integration with vue.js core makes building single-page applications a breeze. Learning Vue, Vue Router is one of the skills that must be mastered. The official tutorial is the best reading literature, please read it carefully

Application scenarios

First, let’s talk about a typical application scenario of vue-Router

Product manager: One day, the product manager took the Nuggets APP and said, this is a beautiful APP, we also want to make a Web APP, the style, just copy the nuggets APP style.

Requirements:

  1. Bottom navigation bar: a fixed row of buttons at the bottom
  2. Top navigation bar: The top **** also has a fixed row of buttons
  3. There is also a fixed navigation bar with a back button at the top. After clicking the bottom navigation bar, the middle part of the page should jump to the corresponding function page, and after clicking the back button at the top, it should return to the previous page.
  4. Load pages with as little or no refresh as possible. Optimize the user experience
  5. The loading speed must be fast and reduce traffic consumption as much as possible
  6. The URL should be beautiful and the URL can accept parameters dynamically. Such as:

Music.163.com/#/my/m/musi…

Demand analysis

Newbie: Newbie gets the requirements. The first three requirements are relatively simple. You can use the display property of the CSS to switch them. What about the fourth and fifth requirements? When loading the page, you must do the page request, page resources are also a lot of traffic. As for the sixth function, it’s tricky. Scratch your head……

Old bird: rookie ah, see you this hard think of meditating, encounter what difficult problem?

Rookie: the product manager of heaven kill, let me do a project, also raised a pile of additional requirements, I all want to take a big knife to chop dead him. Hate hate with the product manager

Old bird: Oh, don’t worry. It looks like you’re stuck in a traditional development mindset. It’s 2020 and you don’t know about single page development.

Rookie: what is single page development ah, tell me about bai? Is that amazing? To solve my problems?

Old bird: internal affairs are not determined for Baidu, now learning is not too late. Ha ha.

Rookie: study hard in……

What is a single page

There is only one main page of the WEB application, public resources (JS, CSS, etc.) only need to load once, all content is contained in the main page, for each function module component. Single-page application skip is to switch related components and refresh only local resources. It is often used in PC official website, shopping and other websites.

What is multiple pages

Each time the page jumps, the background server will return a new HTML document, this type of site is also called multi-page site, also known as multi-page application. The traditional page writing method is mostly multi-page

Vue-Router

The installation

npm npm install vue-router

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Copy the code

Basic Route Configuration

Export const constantRouterMap = [..., {path: '/', Component: Layout, // redirect: Children: [{path: 'dashboard', Component: () => import('@/views/ dashboard'), name: // children: [{path: 'dashboard', Component: () => import('@/views/ dashboard'), name: 'Dashboard', // Routing meta meta: {...}}]},...Copy the code

Routing split

We can split the route into ordinary route and Admin route according to the service

The basic routing

Anyone can view the route. Such as the home page.

Privilege routing

This page is unique for the administrator to obtain after login. The route page is displayed differently according to different permissions

Public permission routing

Permission blocking page. 403, 403, 503…

Routing control

  1. Controls route redirects using vue-router beforeEach hook

  2. Vue-router addRoutes is used to inject routes to realize control

BeforeEach (1)

The hook requests the server to obtain the current user route. The hook determines each route hop. If the incoming route object is a basic route or a permission route, the hop is normal. Otherwise cancel the jump and go to the error page

router.beforeEach((to, from, next) => { // ... /* To: Route: destination Route object to be entered from: Route: current navigation Route to leave next: Function: Must call this method to resolve this hook. The execution effect depends on the next method's call parameter */}.Copy the code

(2) addRoutes

Dynamically add more routing rules. The argument must be an array that matches the Routes option.

By calling the addRoutes method, it is injected into the VUe-Router instance to achieve routing control

router.addRoutes(routes: Array)

Transition animation -NProgress

npm install –save nprogress

// Simply call start() and done() to control the progress bar.
NProgress.start();
NProgress.done();
Copy the code

Realize the principle of

In vue-Router, the mode parameter controls the implementation mode of the route:

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})
Copy the code

For more on the principles, see the next article…

The resources

  1. Vue-Router
  2. Nprogress
  3. Vue-router Beginner guide zhihu