Vue.js初始加载时如何根据用户历史访问渲染对应页面？

Hey there! Based on your requirement—showing the home page on first visit, user details for returning anonymous users—here's a straightforward implementation, assuming you're using Vue (since you mentioned beforeRoute-like logic; adjust if you're using another framework):

Step 1: Track Visits with LocalStorage #

Since there's no login system, we'll use localStorage to store a simple flag indicating if the user has visited before. This persists across browser sessions (until the user clears their storage).

Step 2: Use a Global Route Guard for Initial Redirects #

The best place to handle this initial page redirect is a global前置守卫 (router.beforeEach in Vue). This runs before any route is resolved, so it can intercept the initial load and send the user to the correct page immediately.

Here's a complete code example for your router config:

// router/index.js (Vue 3 example)
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import UserDetails from '../views/UserDetails.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/user-details',
    name: 'UserDetails',
    component: UserDetails
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

// Global guard to handle first/returning user logic
router.beforeEach((to, from, next) => {
  const hasVisited = localStorage.getItem('hasVisited')

  if (!hasVisited) {
    // First visit: mark as visited, ensure we're on Home
    localStorage.setItem('hasVisited', 'true')
    to.name === 'Home' ? next() : next({ name: 'Home' })
  } else {
    // Returning user: redirect from Home to User Details
    to.name === 'Home' ? next({ name: 'UserDetails' }) : next()
  }
})

export default router

Key Notes: #

• Vue 2 Adjustment: If you're using Vue 2, replace createRouter/createWebHistory with new VueRouter({ mode: 'history', routes })—the guard logic stays identical.
• Why Global Guard? It’s the earliest hook that runs during app load, so the redirect happens before any component renders, avoiding flash of the wrong page.
• Edge Case: If the user clears their browser storage, they'll be treated as a first-time visitor again, which aligns with the anonymous approach.

If you're using a different framework (like React with React Router), let me know and I can adapt this logic to that context!

内容的提问来源于stack exchange，提问作者Reshma Ks