Vue路由模式

vue-router中默认的路由模式是hash模式,即:#/路由地址

当启用history路由模式,就不会看到#,只剩:/路由地址 

由此可能出现问题:客户端和服务端都有路由地址,并且有可能重名。如服务端:/index(服务器端查询)  VUE中:/index(Vue脚手架路由器查询)且,浏览器只要看到不带#的地址,都会发送给服务器端

解决方法:在服务器端配置重定向,发现来源的域名地址不是服务器端域名地址,只是相对路径相同,则重新返回给浏览器,请浏览器解析。

步骤:

  ①Vue脚手架中:router/index.js中:

    new VueRouter({
      mode:"history",
      routes
    })

  ② 如果服务器端是nodejs:需要安装一个专门支持history重定向的中间件

    npm i -save connect-history-api-fallback

    在app.js中,先引入history(require("connect-history-api-fallback")),再创建服务器(var app=express()),app.use(history())

虽然改成了history模式,但是带#/和不带#方式其实都能用

可是设置了history模式后会出现一个新的问题:重定向后,刷新页面,有可能会导致样式和图片路径都找不到

此时可以:

  (1)所有图片和可直接使用的第三方的js和css文件,放public;

  (2)在index.html中,引入public下的第三方js和css和img文件时,以/开头,不能用相对路径

    (3)服务端请求来的src属性的地址,如果不带/开头,需要先通过遍历或者字符串拼接的方式,把src属性前面拼上"/xxx"让路劲完整

原文地址:https://www.cnblogs.com/codexlx/p/12496055.html