对于Vue的单页面应用（SPA），在页面之间进行跳转时常常会出现一个问题：跳转后浏览器的地址栏会发生变化，但是页面的历史记录并没有被记录下来，点击浏览器中的“后退”按钮时，不能正确的回退到上一个页面。
这个问题的出现是因为在Vue的路由中使用了history模式，而如果想要在这种模式下正常记录历史记录，需要在路由跳转时手动调用浏览器API添加历史记录。
下面是解决这个问题的具体步骤：
第一步：在Vue工程的router目录下的index.js文件中将Vue的路由模式改成history模式，方法如下：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
mode: 'history', // 将Vue的路由模式改成history模式
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
第二步：在路由跳转时手动添加历史记录
在使用Vue的路由进行页面跳转时，可以使用this.$router.go()，this.$router.push()等方法，这里以this.$router.push()方法举例说明如何手动添加历史记录。
this.$router.push('/some-page').catch(err => {})
在调用这个方法时，我们可以额外添加一个options参数，这个参数中的replace字段用来指定是否替换浏览器历史记录。replace为true时，不会在浏览器中留下已经跳转页面的记录。replace为false（或不传入该字段）时，则会在历史记录中添加当前页面。
下面是两个使用this.$router.push()方法的示例代码：
// 示例1：替换浏览器历史记录，跳转到页面并立即修改页面状态
this.$router.push({ path: '/new-page', query: { name: 'Sam' }, replace: true }).catch(err => {
console.log(err)
})
// 示例2：添加浏览器历史记录，跳转到页面并通过setTimeout修改页面状态
this.$router.push({ path: '/new-page', query: { name: 'Sam' }, replace: false }).catch(err => {
console.log(err)
})
setTimeout(() => {
this.pageLoaded = true // 2秒后修改页面状态
}, 2000)
通过这些步骤，我们就可以在Vue的单页面应用中解决跳转后不记录历史记录的问题了。
本文链接：http://task.lmcjl.com/news/901.html