【 vue-router的原理 】

1、认识vue-router

目前前端流行的三大框架，都有自己的路由实现：

• Angular的ngRouter
• React的ReactRouter
• Vue的vue-router
  vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
  我们可以访问其官方网站对其进行学习：https://router.vuejs.org/zh/

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

路由用户设定访问路径的，将路径和组件映射起来。
在vue-router的单页面应用中，页面的路径的改变就是组件的切换

2、安装和使用vue-router

安装vue-router

npm install vue-router --save

使用vue-router的步骤：

• 第一步：创建路由组件
• 第二步：配置路由映射：组件和路径映射关系
• 第三步：使用路由：通过和

三、route，routes，router

route：首先它是个单数，译为路由，即我们可以理解为单个路由或者某一个路由；

routes：它是个复数，表示多个的集合才能为复数；即我们可以理解为多个路由的集合，JS中表示多种不同状态的集合的形式只有数组和对象两种，事实上官方定义routes是一个数组；所以我们记住了，routes表示多个数组的集合；

router：译为路由器，上面都是路由，这个是路由器，我们可以理解为一个容器包含上述两个或者说它是一个管理者，负责管理上述两个；举个常见的场景的例子：当用户在页面上点击按钮的时候，这个时候router就会去routes中去查找route，就是说路由器会去路由集合中找对应的路由；

四、路由的默认路径

默认情况下，进入网站的首页，我们希望渲染首页的内容。
但是我们的实现中，默认没有显示首页组件，必须让用户点击才可以。

如何可以让路径默认跳转到首页，并且渲染首页组件呢？
我们需要多配置一个映射就可以了

{
  path: '/',
  redirect: '/home'
},

配置解析：

我们在routes中又配置一个映射
path配置的是根路径：/
redirect是重定向，也就是我们将根路径重定向到/home的路径下，这样就可以得到我们想要的结果了。

五、HTML5的History模式

改变路径的方式有两种：

URL 的 hash
HTML5 的 history
默认情况下，路径的改变使用的URL的 hash
如果希望使用HTML5的history模式，进行如下的配置：

6、router-link属性介绍

• to：用于指定跳转的路径
• tag：tag可以指定之后渲染成什么组件，比如我们下面的代码会被渲染成一个<li元素，而不是<a 。 如：<router-link to=‘/home’ tag=‘li’
• replace：replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中
• active-class：当对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。

7、路由懒加载

路由懒加载的方式

方式一：结合Vue的异步组件和Webpack的代码分析
const Home = resolve => { require. ensure([‘…/ components/Home.vue’], () => { resolve(require(‘…/ components/Home.vue’)) })};
方式二：AMD写法
const About = resolve => require([’ …/ components/ About.vue’], resolve);
方式三：在ES6中，我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割
const Home = () => import(’ . ./ components/Home.vue ’ )