vue全家桶(2.1)

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这个组件

vue全家桶(2.1)_第1张图片

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这个位置

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))