如何在URL短链Vue.js应用中基于访问状态实现Vue-Routing导航？

Hey there! 针对你这个Vue短链应用的条件导航需求，我给你整理了一套清晰的实现方案，主要依靠Vue Router导航守卫和本地存储来完成，具体步骤如下：

1. 设计访问状态标识 #

首先我们需要用localStorage来记录用户是否已经访问过应用——因为localStorage的数据会持久化保存（除非用户手动清除），刚好符合"已访问过"的判断需求：

• 用户首次打开应用时，localStorage里没有对应的标识，我们就标记为首次访问
• 用户后续访问时，读取到标识，就判定为已访问用户

2. 配置Vue Router导航守卫 #

我们需要在路由全局前置守卫里做判断逻辑，在用户进入应用的第一时间就完成页面跳转。

首先，假设你的基础路由配置是这样的：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import MyShortlinks from '@/views/MyShortlinks.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home // 首页组件（首次访问展示）
  },
  {
    path: '/my-shortlinks',
    name: 'MyShortlinks',
    component: MyShortlinks // 用户的短链接管理页面（已访问用户展示）
  }
]

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

接着添加全局前置守卫，实现条件跳转逻辑：

router.beforeEach((to, from, next) => {
  // 读取本地存储的访问标识
  const hasVisited = localStorage.getItem('hasVisited')
  
  // 场景1：首次访问用户，且当前目标不是首页 → 强制跳转到首页
  if (!hasVisited && to.name !== 'Home') {
    next({ name: 'Home' })
  } 
  // 场景2：已访问用户，且当前目标是首页 → 自动跳转到短链接页面
  else if (hasVisited && to.name === 'Home') {
    next({ name: 'MyShortlinks' })
  }
  // 其他情况（比如已访问用户直接进入短链接页面）→ 正常放行
  else {
    next()
  }
})

3. 优化用户体验（可选） #

如果你不想用户刚打开首页就被标记为已访问，可以把标记操作绑定到用户的主动交互上，比如首页的"进入我的链接"按钮点击事件：

<!-- Home.vue 中的按钮 -->
<button @click="enterMyShortlinks">进入我的短链接</button>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

const enterMyShortlinks = () => {
  // 标记为已访问
  localStorage.setItem('hasVisited', 'true')
  // 跳转到短链接页面
  router.push({ name: 'MyShortlinks' })
}
</script>

4. 容错处理（可选） #

要考虑用户禁用本地存储的极端情况，可以加个try-catch包裹逻辑：

router.beforeEach((to, from, next) => {
  try {
    const hasVisited = localStorage.getItem('hasVisited')
    // 原有判断逻辑...
    if (!hasVisited && to.name !== 'Home') {
      next({ name: 'Home' })
    } else if (hasVisited && to.name === 'Home') {
      next({ name: 'MyShortlinks' })
    } else {
      next()
    }
  } catch (e) {
    // 本地存储不可用时，默认按首次访问处理
    next({ name: 'Home' })
  }
})

这样整个逻辑就完整啦，能精准实现你想要的首次/已访问用户的导航分流效果~

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