3.路由切换

3.1.vue-router路由切换

3.1.1.什么是前端路由

路由这个概念最先是后端出现的，发送不同的请求，后端根据请求的不同返回不同的资源，这个时候的url是和后端交互的，需要在后端去配置路由的跳转，这种开发方式有两个特点，一是整个项目中前端代码和后端代码是柔在一起的，通常都是需要模版引擎来支持，代码杂糅在一起后不方便本地开发调试，一旦后端代码有错误，前端无法进行开发，前端被限制在后端的开发方式中，效率很低，项目通常是后端主导，二是每次切换一个页面都需要去重新请求服务器，即使两个页面有很多相似的地方都需要去重新请求，随着单页应用的发扬光大，MVVM概念兴起，前后端分离以及前端工程化的发展，前端所做的事情越来越多，前端圈快速崛起。这里说的单页应用，通俗的说就是一个页面，是无刷新的，url变化，对应的是组件的切换，前端路由是为了实现这种单页应用而出现的。总结起来就是前端路由就是在前端去控制不同url路径，切换不同的组件，可以认为url和组件是一种映射关系

例如：

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
    }
  ]

这个配置中, '/vip'这个url路径，匹配的是Vip这个组件，‘/course’这个ulr路径，匹配的是Course这个组件

3.1.2.vue-router使用步骤

1.安装模块

npm install vue-router --save

2.引入模块

import VueRouter from 'vue-router'

3.作为Vue的插件

Vue.use(VueRouter)

4.创建路由实例对象

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

5.注入Vue选项参数

new Vue({
    router
})

6.告诉路由渲染的位置

匹配上的组件会被渲染到router-view这个位置

<router-view></router-view>

3.2.hash和history

3.2.1.什么是单页应用？

百度百科解释，单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

3.2.2.什么是hash和history？ hash和history都是浏览器自身的属性，这两种方式都可以对地址进行访问，hash的访问方式即在访问地址末尾加 #name，如：http://edu.nodeing.com#1、 http://edu.nodeing.com#2， history方式通过几个方法back、forword、go等控制页面跳转，他们的区别是hash无刷新，history会去请求后端接口

做单页应用开发，需要引入前端路由，前端路由的核心就是改变了视图后不会向后端发出请求。如果不是单页应用，路由改变是会向后端发送请求的，例如：http://edu.nodeing.com/course/explore、 http://edu.nodeing.com/classroom/explore，访问这两个地址，路由是不一样的，都是会向后端发送请求的，这不符合前端路由的要求

为了实现路由改变而不向后端发送请求这个目的，可以利用浏览器提供的hash和history这两种模式。

hash: hash虽然在url中，但不会被包含在http请求中，对后端没有影响，hash改变不会重新加载页面(无刷新)

history: 虽然history的几个方法back、forword、go等控制页面跳转会刷新页面，但h5中新增了两个方法pushState和replaceState方法，这两个方法可以实现前端路由的目的，它们应用于浏览器记录栈，在当前已有的back、forword、go基础之上，他们提供了对历史记录修改的功能，当它们执行修改时，虽然当前的url改变了，但是浏览器不会立即向后端发送请求

vue-router即是利用了hash和history这两种模式，来实现路由控制

3.2.3.在vue-router中配置路由模式

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

螺钉课堂视频课程地址：http://edu.nodeing.com

vue全家桶（2.1）