react和vue專案中去掉瀏覽器url上的"#"號

Banshee發表於2020-04-27
ReactVue瀏覽器

按照上一篇文章結尾說的,此篇文章應該開始寫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
})

看圖:

111.png

再來解決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>

看圖:

222.png
總結來說,這只是一個小細節,不影響功能的使用情況下算是一點點美化

相關文章