湖南盈达电力建设有限公网站,三水网站建设首选公司,何为网络营销?,企业自助建站系统下载实现思路
使用 this.$router.push(location) 来修改 url#xff0c;完成页面路由跳转使用params来隐式传递url的参数#xff0c;它类似post#xff0c;url看不出#xff0c;使用query来传递参数的话#xff0c;类似get#xff0c;url一定会被格式化为http://www.xxx.com…实现思路
使用 this.$router.push(location) 来修改 url完成页面路由跳转使用params来隐式传递url的参数它类似posturl看不出使用query来传递参数的话类似geturl一定会被格式化为http://www.xxx.com/index?id123而不能自定义以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
},
