vue 两种路由模式

一、两种模式比较

在vue.js中，路由模式分为两种：hash 模式和 history 模式。这两种模式决定了URL的结构和浏览器历史记录的管理方式。

1. hash 模式带 #，#后面的地址变化不会引起页面的刷新。换句话说，hash模式不会将#后面的地址带给服务器。如果是在移动端，带有#地址的链接是无法访问的。

2. history 模式，没有#，地址变化会引起页面刷新，这种模式会将整个地址发送给服务器。在vue项目中，如果设置成了 history模式，在进行路由跳转时，开始地址是localhost:8081/ , 跳转后的地址是localhost:8081/employee, 但由于是单页面，服务器只有一个index页面，并没有employee页面，就会出现404。这种URL更加美观和友好，但是需要后端配置支持，否则在vue项目中，刷新会导致页面404

 

二、切换两种路由模式 

在vue脚手架中，默认是采用hash模式的，但项目上线时，一般都会将其改成history模式。只需要在路由配置文件中设置即可。

import VueRouter from 'vue-router'

const router = new VueRouter ({
  mode: 'history', // 设置为 history 模式
  routes
})

export default router

三、nginx 环境下解决history 404 问题

上面我们知道为什么history模式刷新会出现404问题了，现在我们可以配置 nginx， 如果页面发生了变化，就让它返回 index 页面就好了。

1. 进入到 nginx/config 目录下

2. 更改配置

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

3. 重启服务

 ./nginx -s reload  #重启