vue-router

一、什么是路由？

        路由（route）是一组key-value的对应关系，多个路由需要一个路由器（router）管理。        

        value即为一个component，用于展示页面内容。  

二、路由的核心原理

        更新视图但不重新请求页面，是前端路由原理的核心之一

        原生html中，靠<a>跳转不同的页面，这种方法会重新请求页面，进行页面的刷新，用户体验效果差。

        例如： <a  href="./home.html">Home</a>

        改变浏览器地址，不向服务器发出请求有两种方式:
        1. Hash模式：在地址中加入#以欺骗浏览器，让浏览器以为正在进行页内导航
        2.History模式 使用H5的window.history功能，能让开发人员在不刷新整个页面的情况下修改URL

三、vue-router的安装使用

1.安装 npm i vue-router

2.引入并使用

        //引入VueRouter

        import VueRouter from 'vue-router'

        //应用插件

        Vue.use(VueRouter)

3.编写router配置项

        //引入VueRouter

        import VueRouter from 'vue-router'

        //引入路由组件

        import About from '../components/About'

         //创建router实例对象，管理路由规则

         const router = new VueRouter({

                routes:[

                         {

                            path:'/about',

                            component:About

                         }

                ]

           })

        //暴露router

        export default router

4. 使用router-link实现切换，

        <router-link  to="/about">About</router-link>

        使用router-view指定展示位置

         <router-view></router-view>

四、路由的两种模式

1.hash模式

      hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说 #是用来指导浏览器动作的，对服务器端完全无用，HTTP请求中也不会不包括#；同时每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置。

2.history模式

        HTML5 History API提供了一种功能，能让开发人员在不刷新整个页面的情况下修改站点的URL，就是利用 history.pushState API 来完成 URL 跳转而无须重新加载页面，push方法会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置，而replace则没有浏览记录。

3.两种模式的区别：  

          1.底层原理不一样：

                        BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。

                        HashRouter使用的是URL的哈希值。

            2.path表现形式不一样

                        BrowserRouter的路径中没有#,例如：localhost:3000/demo/test

                        HashRouter的路径包含#,例如：localhost:3000/#/demo/test

            3..HashRouter可以用于解决一些路径错误相关的问题。（详情见下文）                   

        通常情况下，我们会选择使用History模式，原因就是Hash模式下URL带着‘#’会显得不美观，但实际上，这样选择一不小心也会出问题。比如：

        但当用户直接在用户栏输入地址并带有参数时：

        Hash模式：xxx.com/#/id=5 请求地址为 xxx.com,没有问题；

        History模式: xxx.com/id=5 请求地址为 xxx.com/id=5，如果后端没有对应的路由处理，就会返回404错误。

        为解决这一问题，vue-router提供的方法是：在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。 这么做以后，服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。