vue family bucket (2.1)

3. route switching

3.1.vue-router routing switch

3.1.1 What is the front-end route

This concept was first back-end routing occur, sending a different request, the backend returned different resources depending on the request, this time url is interactive and back-end, you need to configure routing jump back end, this development approach has two characteristics, namely, the entire project front-end code and back-end code is soft together, usually are required to support the template engine, code, mixed together with the local development and debugging is not convenient, once the back-end code with errors , the front end can not be developed, is limited to the front of the back-end development mode, the efficiency is very low, projects are usually dominant back end, and second, every time you switch a page needs to re-request the server, even if two pages have many similarities all need to re-request, with the rise flourish, MVVM application of the concept of a single page, separating the front and rear end of the front end engineering and development, more and more things done front end, the front end of lap rapid rise. Here that the one-page application, popular to say that a page is not refreshed, url changes, corresponding to the switch, front-end routing components in order to achieve this single-page application arise. Summed up at the front end to the front end of the route is different from the control url paths, switch between different components, and may be considered url component is a mapping relationship

E.g:

routes: [
    {
      path: '/',
      components: {
        default: Home,
        a: HomeSider,
        b: HomeMain
      }
    },
    {
      path: '/vip',
      component: Vip,
      children: [
        {
          path: 'one',
          component: One
        },
        {
          path: 'two',
          component: Two
        },
        {
          path: 'three',
          component: Three
        }
      ]
    },
    {
      path: '/course',
      component: Course
    }
  ]

In this configuration, '/ vip' url this path, the matching component is Vip, '/ course' ulr this path, the matching component is Course

3.1.2.vue-router using procedure

1. Install Module

npm install vue-router --save

2. Introduction module

import VueRouter from 'vue-router'

3. As the Vue plug-in

Vue.use(VueRouter)

4. Create an instance of an object routing

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/questions',
      component: Questions
    },
    {
      path: '/vip',
      component: Vip
    },
    {
      path: '/course',
      component: Course
    }
  ]
})

The option parameter injection Vue

new Vue({
    router
})

6. Tell routing rendering position

The assembly is rendered to match the router-view this location

<router-view></router-view>

3.2.hash和history

3.2.1 What is a single-page application?

Baidu Encyclopedia explanation, one-page Web applications (single page web application, SPA), is the only one application Web page is to load a single HTML page and dynamically update the Web page of the application when a user interacts with the application.

3.2.2. What is hash and history? hash and browser history are the properties of their own, which can be accessed in two ways to address, hash access method that is added at the end #name access address, such as: http: //edu.nodeing.com#1, http : //edu.nodeing.com#2, history mode in several ways back, forword, go, etc. page jump control, the difference between them is no hash refresh, history will go to the back-end interface to request

To do a single-page application development, the need to introduce core front-end route, the front end of the route is changed will not make a request to the back-end rear view. If it is not one-page application, the route change will send a request to the back-end, for example: http: //edu.nodeing.com/course/explore, http://edu.nodeing.com/classroom/explore, visit these two addresses, routing is not the same, all sends a request to the back-end, front-end route which does not comply with the requirements of

In order to realize this route change request is not transmitted to the rear end of the object may be provided using a browser history hash and two modes.

hash: While in the url, but will not be included in the http request, has no effect on the back-end hash, hash changes will not reload the page (no refresh)

history: Although several methods of back history, forword, go jump and other control page will refresh the page, but h5 Two new methods pushState and replaceState method, the two methods can achieve the purpose of the front end of the route, they apply browser history stack, the current existing back, forword, go basis, they provide a historical record of changes function, when they perform the modification, although the current url has changed, but the browser will not be back immediately sends a request

vue-router and that is the use of hash history two modes to implement routing control

3.2.3 Configure Route mode vue-router in

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home'
import MyHeader from '@/components/MyHeader'
import MyContent from '@/components/MyContent'
import MyFooter from '@/components/MyFooter'

// 让vue-router作为vue的插件使用
Vue.use(VueRouter)

// 配置路由信息
const router = new VueRouter({
  //默认hash模式
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/header',
      component: MyHeader
    },
    {
      path: '/content',
      component: MyContent
    },
    {
      path: '/footer',
      component: MyFooter
    }
  ]
})

export default router

Screw classroom video lessons address: http: //edu.nodeing.com