VUE路由相关-Toy模板网

这篇具有很好参考价值的文章主要介绍了VUE路由相关。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue的路由和nginx的路由有许多相似之处，也有一些不同的地方。

nginx的路由是这样的：

location /order/ {
    proxy_pass  http://localhost:8080/order/
}

这几行代码的意思是拦截url含有“/order/”的请求并将“/order/”替换为http://localhost:8080/order/，这样的话，原来的url就会发生改变。

在实际应用环境中，浏览器不会访问到真正的后端服务器地址，而是会通过nginx来访问。这样做的目的是保护服务器免受攻击（例如ddos攻击）。

例：如果说想访问 http:/10.0.0.2:8080/order，只能通过访问nginx：10.0.0.1:80/order,然后nginx去代理过去。

ddos攻击：分布式拒绝服务攻击，这种网络攻击形式尝试用恶意流量淹没网站或网络资源，从而导致网站或网络资源无法正常运行。在分布式拒绝服务(DDoS) 攻击中，攻击者发出海量实际上并不需要的互联网流量，耗尽目标的资源，造成正常流量无法到达预定目的地。

而在vue中，路由的代码是这样的：

proxy: {
        "/api/v1": {
          target: "https://107.0.0.1:8080/api/v1",
          ws: true,
          /** 是否允许跨域 */
          changeOrigin: true,
          rewrite: (path) => path.replace("/api/v1", "")
       }
}

这几行代码的意思是拦截url中含有 "/api/v1" 的请求，并在 "/api/v1" 前加上target中的url即 "https://107.0.0.1:8080/api/v1"，此时url会变为 "https://107.0.0.1:8080/api/v1/api/v1"，然后在rewrite中会将url中的 “/api/v1” 替换为 “”，此时我们才会访问到nginx的地址即 "https://107.0.0.1:8080/api/v1"（当然这也不是后端服务器的地址）。文章来源地址https://www.toymoban.com/news/detail-588558.html

到了这里，关于VUE路由相关的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！