vue 实现页面静态化. 已解决不采用框架-前端-阿习进阶博客

　　一、使用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)

},

　　当你同一个路由的时候，只是参数变化了，变化后需要手动刷新，数据才出来，显然是有点bug

bug处理示列：

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'

},

本文来自投稿，不代表阿习进阶博客立场，如若转载，请注明出处：https://www.yanxias.com/qianduan/153.html

vue 实现页面静态化. 已解决 不采用框架

相关推荐

vue 实现页面静态化. 已解决不采用框架