Vue Cli 3 動態路由實現偽靜態

2021-10-03 12:33:14 字數 820 閱讀 2642

想要實現偽靜態,路徑後面加上 .html 字尾,可以通過動態路由來實現。

首先在你想要實現偽靜態的頁面的路由規則中配置,如:

這裡是給 detail 這個頁面的路由中配置乙個引數 id,這個引數是 parmas 引數,傳遞的方式有兩種

this.$router.push(})	//注意引數名得和路由規則中配置得一致,否則不會顯示在路徑裡

this.$route.push("/detail/9")

在 detail 頁面的 $route.params 裡獲取到傳遞過來的引數,這種 params 引數即使頁面重新整理或者前進後退都不會丟失。

要實現偽靜態則是,將我們要傳遞的引數後面加上 「.html」,即

this.$router.push(})
這樣路徑就是 …/detail/9.html ,我們拿到的引數就是 9.html ,我們再去掉後面的 .html 就得到了引數 id 了

注意這裡有個坑,如果你的專案是部署在子路徑下,也就是 vue.config.js 中配置了 publicpath:』./』 ,而且你的路由模式又是 history 模式,那麼使用動態路由的頁面,重新整理就會報錯

uncaught syntaxerror: unexpected token <
這是因為vue-cli 的publicpath預設是/,它會假設應用被部署到乙個網域名稱的根目錄上,當被部署到乙個子路徑時,需要修改為:/子路徑/

解決方法:將 publicpath 配置為 『/』 重啟專案即可,打包上傳時再修改為 『./』

Vue cli3如何新增路由(router)

之前使用的vue cli2的是否可以在建立專案時直接引入vue router,但是現在vue cli3新建專案後卻少了很多東西,我們需要自己來安裝使用路由。具體方案如下 安裝路由 npm install vue router建立router.js與mian.js同級 router.js中的內容為 i...

vue cli3路由vue router用法

npm install vue router main.js檔案內 匯入vue router import vue from vue vue router是以來vue的 import vuerouter from vue router 匯入vue router,注意import vuerouter ...

vue cli3實現分環境打包

在vue cli3的專案中,預設的package.json配置 此時只要根據process.env.node env設定不同請求url就可以很簡單的區分出本地和線上環境。但是實際真實的專案中,會有測試,預發布等環境。並且vue cli3號稱0配置,無法直接修改打包檔案,那麼怎麼區分不同的線上環境呢?...