Vue的hash模式和history模式

我和Vue

Round1：Vue和VueRouter

首先吹吹Vue：

​ Vue是一台用于构建用户界面的渐进式框架，可以自底向上逐层应用，有易于上手、便于与第三方库和已有项目整合等优点。

再讲讲Vuerouter是什么

​ Vue Router是Vue.js.官方的路由管理器，包含路由配置、视图过度效果、导航控制、自定义滚动条等功能。有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。

啊，Vue Router的两种模式

​ Vue Router默认hash模式。在hash模式下，URL中会多一个#,不太美观。并且hash模式只能设置同文档的URL只能修改#之后的部分，允许添加短字符串。当修改值和之前的值不一样才会添加到栈中。

​ Vue还有另一种history模式。history利用了HTML5 History Interface中新增的push state() 和replace state()方法。在这个模式下，可以设置任意同源的URL、可添加任何数据类到记录中、可设置title属性。唯一需要说明的是：history模式下URL确实好看，但是需要后台配置支持，如果后台没有

正确的配置，当用户访问网页时会返回404。所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

​ 后端配置案例：

​ Apache：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

​ node.js:

const http = require('http')
const fs = require('fs')
const httpPort = 80

http.createServer((req, res) => {
  fs.readFile('index.htm', 'utf-8', (err, content) => {
    if (err) {
      console.log('We cannot open "index.htm" file.')
    }

    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    })

    res.end(content)
  })
}).listen(httpPort, () => {
  console.log('Server listening on: http://localhost:%s', httpPort)
})