• Vue Router 基础

      • $route 这里面放的是路由规则
      • $router 路由对象，跟路由相关的方法、模式等
      • this.$router.replace(‘/login’) replace不会记录本次历史，跳转后，没有后退前前进
      • this.$router.go(-2) 回到上上次记录

      • 表现形式的区别

      • 原理的区别

        • Hash 模式是基于锚点，以及onhashchange事件

        • History 模式是基于HTML5中的History API

          • history.pushState() IE10 以后才支持
          • history.replaceState()

        • History模式的使用

          • History需要服务器的支持
          • 单页应用中，服务端不存在http://www.testurl.com/login这样的地址会返回找不到该页面
          • 在服务端应该除了静态资源外都返回单面应用的index.html

          • 白话：

            • 在nodejs环境中，如果没有注册history模式的中间件： app.use(history())
            • 则在访问 localhost:3000/about 时，会先请求服务器，服务器端没有配置/about，会返回服务端的404页面，即 Cannot GET /about
            • 如果注册了 app.use(history())，服务器端找不到/about，就会返回应用的index.html，而单面应用index会根据/about，返回about.html页面

        • nginx服务器配置

          • 从官网下载nginx的压缩包
          • 把压缩包解压到C盘根目录，c:\nginx-1.18.0文件夹
          • 打开命令行，切换到目录 c:\nginx-1.180
          • 启动 start nginx
          • 重启 nginx -s reload
          • 停止 nginx -s stop
          • 把打包好的dist里面文件放到nginx的html文件夹下，刷新能用
          • 但点击其他路由的时候，再刷新，请求这个地址的时候，服务器找不到请求的文件，就会返回404错误，这是因为nginx没有处理router的history模式
          • 找到C:\nginx-1.18.0\conf下nginx.conf配置文件
          • 在server 下 location里，添加一行配置： try_files $uri $uri/ /index.html; 找不到时，尝试访问，访问不到，就默认返回index.html

        • VueRouter 实现原理

          • Hash 模式

            • URL中#后面的内容作为路径地址，如果只改变了#后面的url，浏览器不会向服务器请求这个地址，但会把这个地址记录到访问历史中
            • 监听hashchange事件，当hash改变后，会调用hashchange事件
            • 当hash改变后，会记录相应地址，并找到该路径的对应组件重新渲染

          • History 模式

            • 就是一个普通的url，通过调用 history.pushState() 来改变地址栏，仅仅是改变地址栏，并把地址记录到访问历史中，浏览器也不会发送服务器请求
            • 通过监听popstate事件，可以监听到浏览器操作的历史变化，在popstate处理函数中，可以记录改变后的地址，值得注意的是调用pushState和replaceState时，并不会触发该事件，浏览器前进或后退，或者调用history的back或forword的时候，该事件才会被触发
            • 根据当前路由地址找到对应组件重新渲染

        • Vue的构建版本

          • 运行时版：不支持template模板，需要打包的时候提前编译
          • 完整版：包含运行时和编译器，体积比运行时版大10K左右，程序运行的时候把模板转换成render函数
          • vue cli默认创建的是运行时版本

          • 方法一： 改变为完整版

            • 在项目根目录下创建 vue.config.js 配置文件

              • 导出的配置选项添加： runtimeCompiler: true 添加编译器，即为完整版
          • 方法二： 运行时版本，组件中直接写render函数```javascript render(h){ //render函数参数 h,h用来帮助创建虚拟dom return h(“a”,{ //h里面三个参数 标签、Dom对象属性、内容 attrs:{
            1.  href:this.to
            }, on:{
            1.  click:this.clickhander
            } },[this.$slots.default]) }, // template:”<>” ```