1、认识路由

1.1什么是路由？

路由( routing )就是通过互联的网络把信息从源地址传输到目的地址的活动.---维基百科

路由提供了两种机制：路由和转送。

（1） 路由是决定数据包从来源到目的地的路径。

（2）转送将输入端的数据转移到合适的输出端。

路由器中的路由表决定了数据包的指向。

1.2前端渲染和后端渲染

1.2.1后端渲染阶段：jsp

是html+css+java的组合，用户请求服务端的数据的时候会将数据和html和css组合成网页，将该网页传递到前端浏览器，此时浏览器接受到的就是后端渲染好的网页了。也就是说服务器直接生产渲染好的页面返回到客户端进行展示。

后端路由的缺点：

一种情况是整个页面的模块由后端人员来编写和维护的.

另一种情况是前端开发人员如果要开发页面,需要通过PHP和Java等语言来编写页面代码.

而且通常情况下HTML代码和数据以及对应的逻辑会混在一起,编写和维护都是非常糟糕的事情.

1.2.2前后端分离阶段，前端渲染：AJAX

前端渲染就是浏览器请求的数据都是在前端渲染的。

前后端分离时前端开发者只需要关注和用户的交互，后端开发者只需要关注提供API接口。

1.2.3前端路由阶段：SPA页面（单页面富应用）

整个网站只有一个html页面.

实现的基本原理是资源服务器中只有一个html页面一个css文件和一个js文件，当用户发出请求时，会将静态服务器上的全部资源下载下来，当用户访问指定的页面时会选择性地加载相应的页面（html.css.js文件），实现单页面富应用的技术支撑就是前端路由。说白了选择性地显示页面技术的实质就是组件化技术。前端路由实际上是一种url和资源之间的映射关系，是建立在前后端分离基础之上的。

2、vue-router基本使用

2.1安装vue-router

步骤一:安装vue-router

npm install vue-router --save

步骤二:在模块化工程中使用它(因为是一个插件,所以可以通过Vue.use()来安装路由功能)

第一步:导入路由对象，并且调用Vue.use(VueRouter)

第二步:创建路由实例，并且传入路由映射配置

第三步:在Vue实例中挂载创建的路由实例使用脚手架的时候选择安装路由的话就不需要再安装路由了。

2.2搭建路由框架

2.3使用vue-router

2.3.1:创建路由组件

这里的路由组件实际上是功能模块，因为每个请求都对应一个功能组件。

2.3.2:配置路由映射:组件和路径映射关系

path表示url中含有’/home‘或者’/about‘才显示对应的组件。

2.3.3:使用路由:通过<router-link>和<router-view>

2.3.4</router-link>标签的补充

（1）tag属性: tag可以指定<router-link>之后渲染成什么组件，比代码会被渲染成一个<button>元素,而不是<a>

 

效果

（2）replace属性: replace不会留下history记录,所以指定replace的情况下，后退键返回不能返回到上一个页面中。

（3）active-class属性：当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class,设置active-class可以修改默认的名称.

≥在进行高亮显示的导航菜单或者底部tabbar时，会使用到该类.

>但是通常不会修改类的属性,会直接使用默认的router-link-active即可.

2.4通过代码的方式修改路径

前面在使用<router-link>标签的时候可以做到点击链接或者是button会显示相应的组件，而且地址栏的路径会相应的改变。但是如果不使用<router-link>标签的话，如何实现上述功能呢？

2.5动态路由

2.5.1动态路由的使用

（1）编写路由组件

（2）配置路由组件和路由之间的关系

（3）使用路由组件

2.5.2动态路由扩展

需求：当点击“我的”时 ，会在该组件中显示路径中的信息。

2.6打包文件的结构

项目执行：npm run build 指令时会将项目打包。打包后生成dist文件如下：