VueRouter的两种工作模式

1.对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值
示例：
http://localhost:5005/#/home/message

2.hash值不会包含在HTTP请求中，即：hash值不会带给服务器。

① hash模式部署示例：

在到达任何路由路径在刷新或重新进入都不影响页面。

② histroy模式部署示例：

从hash模式改成history模式

在src/router/index.js中

const router = new VueRouter({
    
    
// 把模式改成 'history' 重新运行打包即可
  mode: 'history',
  routes: [...]
})

重新部署到服务器中。

出现此情况是因为在history模式下后面的路径都会被当成资源向服务器端请求，服务器没有于是就404报错。

解决此问题需要后端人员帮助。以下列举几个解决方案之一：

• connect-history-api-fallback

• 在NPM中搜索 connect-history-api-fallback

• 在服务器中安装以下命令

cnpm install --save connect-history-api-fallback

• 在node引入以下代码

const history = require('connect-history-api-fallback');

// 必须在引入静态资源之前使用history
app.use(history())

• 重新部署运行

• hash模式：

  • 1.地址中永远带着 # 号，不美观。
  • 2.若以后将地址通过第三方手机app分享 ，若app校验严格，则地址会被标记不合法。
  • 3.兼容性好。

• history模式：

  • 1.地址干净美观。
  • 2.相比hash模式兼容性略差。
  • 3.应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

本文实例完整代码：Gitee:[email protected]:hebe0330/vue_route_guards.git