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 {
    HashRouter as Hash,
    Redirect,
    NavLink,
    Link,
    Route,
    BrowserRouter, 
    Switch
} from "react-router-dom";

  <Switch>
          <BrowserRouter>
                <Route path="/" exact render={() => (<Redirect to="/guide" />)} />
                <Route path="/login" component={LazyLoad(()=>import("./login"))}></Route>
                    {/* 订单页 */}
                    <Route path="/orderfrom" component={LazyLoad(()=>import("./orderfrom"))} />
                    {/* 评论页面  comment*/}
                    <Route path="/comment/:goodsId"  component={LazyLoad(()=>import("./comment"))}></Route>
                    {/* 我的评价中心 */}
                    <Route path="/evaluate"  component={LazyLoad(()=>import("./evaluate"))}></Route>
                    {/* 填写追评  addeval*/}  
                    <Route path="/addeval"  component={LazyLoad(()=>import("./addeval"))}></Route>
                    {/* 聊天室 */}
                    <Route path="/chat"  component={LazyLoad(()=>import("./chat"))}></Route>
                    {/* 不存在 */}
                    <Route render={() => (<Redirect to="/guide" />)}></Route>
             </BrowserRouter>
      </Switch>

看图:

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