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>

看圖:

總結來講,這只是一個小細節,不影響功能的使用狀況下算是一點點美化