vue跳转后不记录历史记录的问题

对于Vue的单页面应用（SPA），在页面之间进行跳转时常常会出现一个问题：跳转后浏览器的地址栏会发生变化，但是页面的历史记录并没有被记录下来，点击浏览器中的“后退”按钮时，不能正确的回退到上一个页面。

对于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的单页面应用中解决跳转后不记录历史记录的问题了。