vue-router路由详解，吃一堑长一智

• 如何实现呢？

URL的hash和HTML5的history

前端路由的核心：改变url，但是页面不进行整体的刷新

• URL的hash

• URL的hash也就是锚点(#), 本质上是改变window.location的href属性.

• 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新

• HTML5的history模式

• history.pushState（）实现

history.pushState({},‘’,‘home’)

• history.replaceState（）实现

由于是替换，所以，无法再浏览器中返回

• histoty.go(n)

• history.back（）：等价于history.go（-1）

• history.forward（）：等价于history.go（1）

认识vue-router

• 目前前端流行的三大框架, 都有自己的路由实现:

• Angular的ngRouter

• React的ReactRouter

• Vue的vue-router

• 当然, 我们的重点是vue-router

• vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。

• 我们可以访问其官方网站对其进行学习: https://router.vuejs.org/zh/

• vue-router是基于路由和组件的

• 路由用于设定访问路径, 将路径和组件映射起来.

• 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换.

安装和使用vue-router

• 如果已经学习了webpack, 对这里就会比较熟悉.以下我们主要是通过工程化的方式进行开发的.

• 安装

• npm安装vue-router

npm install vue-router --save

• 在模块化工程中使用(因为vue-rooter是一个插件，所以可以通过Vue.use（）来安装路由功能)

• 第一步：导入路由对象，并调用Vue.use（VueRouter）

import Vue from ‘vue’

import VueRouter from ‘vue-router’

Vue.use