如何在Vue+Vue Router(v4)的SPA中获取用户访问路由并实现特定登录态导航拦截

好问题！Vue Router v4本身并没有内置追踪用户访问过的所有站点内路由的功能，浏览器的history API也没法直接满足需求——它的history.length包含了整个浏览器的历史栈（包括外部网站），刷新后还会重置，完全没法准确判断用户是否是首次进入你的站点。不过我们可以自己实现一个轻量的路由追踪逻辑，完美适配你的导航守卫需求。

核心思路 #

我们需要手动维护一份用户访问过的路由记录，用Pinia（你已经在使用userStore，刚好契合）来存储，再结合localStorage做持久化，避免刷新后记录丢失。然后在导航守卫里根据这份记录判断用户是否是首次进入。

步骤1：修改Pinia Store，添加路由追踪状态 #

首先在你的userStore里添加存储访问路由的数组，以及对应的更新和初始化方法：

// stores/user.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    uid: '',
    // 存储访问过的路由name（也可以存path，看你的需求）
    visitedRoutes: []
  }),
  actions: {
    // 添加路由到访问记录，避免重复添加
    addVisitedRoute(routeName) {
      if (routeName && !this.visitedRoutes.includes(routeName)) {
        this.visitedRoutes.push(routeName)
        // 持久化到localStorage，防止刷新丢失记录
        localStorage.setItem('visitedRoutes', JSON.stringify(this.visitedRoutes))
      }
    },
    // 页面加载时从localStorage恢复记录
    initVisitedRoutes() {
      const savedRoutes = localStorage.getItem('visitedRoutes')
      if (savedRoutes) {
        this.visitedRoutes = JSON.parse(savedRoutes)
      }
    }
  }
})

步骤2：初始化路由记录 #

在应用启动时调用初始化方法，恢复之前的访问记录：

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import { useUserStore } from './stores/user'

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.use(router)

// 初始化访问路由记录
const userStore = useUserStore()
userStore.initVisitedRoutes()

app.mount('#app')

步骤3：完善导航守卫逻辑 #

现在把你的伪代码改成可运行的实际逻辑，结合我们的路由记录：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import { useUserStore } from '../stores/user'

const routes = [
  { path: '/', name: 'home', component: () => import('../views/Home.vue') },
  { path: '/login', name: 'login', component: () => import('../views/Login.vue') },
  // 你的其他路由...
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

router.beforeEach((to, from) => {
  const userStore = useUserStore()

  // 情况1：已登录用户访问登录页
  if (to.name === 'login' && userStore.uid) {
    // 判断是否是首次进入站点：访问记录为空，且是首次加载（from.name为null）
    const isFirstVisit = userStore.visitedRoutes.length === 0 && !from.name
    if (isFirstVisit) {
      // 首次进入，重定向到首页
      return { name: 'home' }
    } else {
      // 已有访问记录，取消导航，停留在当前页面
      return false
    }
  }

  // 情况2：未登录用户访问非登录页
  if (to.name !== 'login' && !userStore.uid) {
    return { name: 'login' }
  }

  // 更新访问记录：只有当导航正常进行时才添加（排除取消导航的情况）
  if (to.name && !userStore.visitedRoutes.includes(to.name)) {
    userStore.addVisitedRoute(to.name)
  }
})

export default router

关键细节说明 #

1. 为什么不用history.length？
   浏览器的history.length包含了用户整个浏览器会话的历史（比如之前打开的其他网站），而且刷新页面后，这个值会重置为当前页面所在栈的长度，完全没法准确判断用户是否是首次进入你的站点。

2. 如何判断首次进入？
   我们结合两个条件：visitedRoutes为空（没有访问过任何路由），且from.name为null（首次加载应用时，from是一个空路由对象，name为null）。这样就能准确区分用户是首次打开站点，还是从其他路由跳转回登录页。

3. 持久化的必要性
   用localStorage持久化访问记录，避免用户刷新页面后丢失之前的访问记录，保证逻辑的连贯性。如果需要在用户退出登录时清除记录，可以在退出方法里添加：

   // 在userStore的退出action里添加
   logout() {
     this.uid = ''
     this.visitedRoutes = []
     localStorage.removeItem('visitedRoutes')
   }
   

额外优化建议 #

• 如果你的路由有动态参数（比如/user/:id），建议存储路由的path而不是name，避免同一个路由的不同参数被重复记录，或者根据需求调整去重逻辑。
• 可以给visitedRoutes设置最大长度，避免记录过多导致性能问题（比如只保留最近10条记录）。

内容的提问来源于stack exchange，提问作者Lucas David Ferrero