项目中如何使用vue-router?

        首先需要了解到前端路由的概念和原理：

        1.用户点击了页面上的路由连接

        2.导致了URL地址栏中的Hash值发生了变化

        3.前端路由监听到Hash地址的变化

        4.前端路由把当前的Hash地址对应的组件渲染到浏览器中

结论：前端路由指的就是Hash地址和组件之间的对应关系

        使用步骤：

        1.在项目中安装vue-router

npm install vue-router@next -S

        2.定义路由组件：即你需要使用跳转的组件

        3.声明路由链接和占位符

       使用<router-link>标签来声明路由链接，使用<router-view>标签来声明路由占位符，在app组件里面声明

        4.创建路由模块:

    在项目中创建router.js，路由模块，在其中按照如下4个总部后创建并得到路由的实例对象        

        (1):从vue-router中按需导入两个方法

        (2)导入需要使用路由控制的组件

        (3)创建路由实例对象

        (4)向外共享路由实例对象

        (5)在main.js中导入并挂载路由模块

       

 重点+考点：

        vue-router的两种方式：

        在hash模式下，Vue Router会监听URL中的哈希部分的变化，并根据哈希值来匹配对应的路由，从而展示相应的组件内容。这种模式的兼容性比较好，因为可以通过改变URL中的hash值来实现前端路由的导航，从而无需请求到服务器。

        在History模式下，Vue Router使用浏览器提供的History API,通过修改浏览器的历史记录来实现前端路由导航，而无需请求到服务器，这样可以使得URL更加美观，清晰，并且与传统的服务器更为接近。但是为了支持History模式，后端服务器需要进行相应的配置，以确保在任何路径下面都返回应用的入口页面。这是因为在History模式下，直接访问浏览器中的URL路径时，服务器需要返回前端应用的HTML文件，由前端路由来处理该URL。

        History API可以分成两大部分：切换历史和修改历史状态：

        修改历史状态包括:HTML5History Interface 中新增的pushState()和replaceState()方法，这两个方法应用于浏览器的历史记录栈，提供了历史记录进行修改的功能。只是当他们进行修改时，虽然修改了url,但浏览器不会立即向后端发起请求，如果要做到改变url但又不刷新页面的效果，就需要前端用到这两个API。切换历史状态：包括forward(),back(),go()三个方法，对应于浏览器的前进后退跳转操作。 

两种模式的对比：

        调用history.pushState()相比于直接修改hash，存在以下优势：

        pushState()设置新的URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，因此只能设置于当前URL同文档的URL。

        pushState()设置新的URL可以与当前的URL一模一样，这样也会把记录添加在栈中，而hash设置的新值必须与原来的不一样才会触发动作添加到栈中。

        pushState()通过stateObject参数可以添加任意类型的数据到记录中，而hash只可添加短字符串。

        pushSatate()可以额外设置title属性供后续使用

        hash模式下，仅hash符号之前的url会被包含在请求中，后端如果没有做到对路由的全覆盖，也不会返回404错误；history模式下，前端的url必须和后端发起请求的url一致，乳沟没有对有用的路由进行处理，将返回404错误。