react和vue项目中去掉浏览器url上的"#"号

按照上一篇文章结尾说的,此篇文章应该开始写webpack如何打包多页面应用了,可我就是个怪人,吃饭的时候突然想到之前别人问我一个问题:"如何去掉vue或者react项目中浏览器url里面的"#"号",当时凭着之前的知识储备,我脱口而出将hash模式设置为history模式不就可以了嘛,答案是对的,可我今天想要将答案通过代码展示出来
我之前的文章vue路由配置和react路由配置区别,详细写了react和vue路由的配置,今天这边文章就是在之前路由配置的代码基础上做个小小的修改,完成去除浏览器url里面的"#"号
简单解释一下前端路由和后端路由(服务端路由):
前端路由:对于vue或者react这种单页面应用来说,我们主要通过URL中的hash值("#")来实现不同页面之间的切换,这个就是hashRouter.
后端路由(服务端路由):每个页面或者网站URL都对应服务器上不同路径下的资源请求就是BrowserRouter,本文的配置和修改完全不涉及后端路由,这个只是知识点的提点

先解决vue路由页面url的"#"号

**vue路由配置我前面的文章详细的写过,
目前只是在此前的代码基础上做一点点修改,
vue路由机制默认是走Hash模式的,之前的mode里面什么都没有设置,
今天将mode设置为history就OK了**
//定义路由对象
const router = new VueRouter({
  mode: 'history',
  // base: process.env.BASE_URL,
  routes
})

看图:

再来解决react路由页面url的"#"号

**react路由配置我前面的文章也详细的写过,
react路由机制我之前设置的是`HashRouter as Hash`,
现在用react-router-dom里面的`BrowserRouter`替换HashRouter就可以了**
import {
    Redirect,
    NavLink,
    Link,
    Route,
    BrowserRouter, 
    Switch
} from "react-router-dom";

  
          
                 ()} />
                import("./login"))}>
                    {/* 订单页 */}
                    import("./orderfrom"))} />
                    {/* 评论页面  comment*/}
                    import("./comment"))}>
                    {/* 我的评价中心 */}
                    import("./evaluate"))}>
                    {/* 填写追评  addeval*/}  
                    import("./addeval"))}>
                    {/* 聊天室 */}
                    import("./chat"))}>
                    {/* 不存在 */}
                     ()}>
             
      

看图:

总结来说,这只是一个小细节,不影响功能的使用情况下算是一点点美化