4x0 - VueRouter - 其它

VueRouter 基础教程系列 🎉

VueRouter 知识结构体系图（大图预警）

路由排名工具

使用 Router Ranker 工具可以帮我们：

• 查看一个路径被转换后的正则表达式。
• 查看路径参数的匹配情况。
• 获得当前路由的评分等级。
• 报告一个 bug。

paths.esm.dev/

服务器配置示例。

为 HTML5 - history 模式增加回退路由，防止后端没有对应的路由配置而产生的 404 错误。

如果你将前端资源部署到了一个子目录中，那么还需要相应修改 Vue CLI 的 publicPath 以及 VueRouter 的 base 属性。

下面假设你是在服务器的根目录下部署前端资源：

Nginx

location / {
    try_files $uri $uri/ /index.html
}

原生 Node.js

http
  .createServer((req, res) => {
    fs.readFile('index.html', 'utf-8', (err, content) => {
      if (err) {
        console.log('We cannot open "index.html" 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)
  });

其它服务器的配置，可以参照官网进行设置：链接