實現思路

使用 this.$router.push(location) 來修改 url，完成頁面路由跳轉

使用params來隱式傳遞url的參數，它類似post，url看不出，使用query來傳遞參數的話，類似get，url一定會被格式化為http://www.xxx.com/index?id=123，而不能自定義，以html后綴結尾

代碼示例：

路由部分

{path: '/share/:detailId', // path用這種寫法是這個思路實現偽靜態的核心name: 'detailLink',component: ArticleDetail }

列表頁面事件跳轉部分

checkDetail: async function (articleId, viewCount) {// 閱讀量自增await countPageViews(articleId, Number(viewCount))// 偽靜態路由跳轉this.$router.push({name: 'detailLink', params: {detailId: articleId + '.html'}})}

?

詳情頁面

?

created: function () {console.log(this.$route)let obj = {}obj.article_id = this.$route.params.detailId.slice(0, -5)// 取文章detail數據this.$store.commit('setArticles', obj)},

至此，已基本上實現vue的偽靜態需求，理論上可以針對任何頁面做偽靜態

這里會有一個坑，是這樣的，當你同一個路由的時候，只是參數變化了，變化后需要手動刷新，數據才出來，顯然是達不到需求的

修復bug，以上面的編碼為示例，邏輯都一樣

把created里的代碼，抽取到method里面，使用vue的watch監測路由變化

created: function () {this.getArticleDATA() }, methods: {getArticleDATA: function () {let obj = {}obj.article_id = this.$route.params.detailId.slice(0, -5)// 取文章detail數據this.$store.commit('setArticles', obj)} }, watch: {'$route': 'getArticleDATA' },

?

?

總結

以上是生活随笔為你收集整理的vue 实现页面静态化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。