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";

  <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>

看图:

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