Vue路由点击链接无法正确跳转，始终显示首页求助

核心问题分析 #

从代码可以看出，当前路由实现依赖URL hash模式（通过window.location.hash监听路径变化），但存在以下冲突：

• 访问的路径是/history这类history模式路径（无#），而代码只处理带#的hash路径，导致路径不匹配，默认显示首页。
• 导航栏的<a>标签直接跳转普通路径，会触发页面刷新，而非前端路由跳转，破坏单页应用逻辑。
• 页面初始化时未处理非hash路径的情况，直接取window.location.hash（为空），因此默认加载首页组件。

快速修复：修正hash模式路由实现 #

如果不想引入vue-router，可通过以下改动修复现有逻辑：

1. 调整导航栏链接为hash格式 #

在App.vue中传递给导航栏的路径加上#前缀，确保点击时触发hash变化而非页面刷新：

<navBar landingURL="#/" historyURL="#/history" findpokemonURL="#/findpokemon"></navBar>

2. 初始化时处理非hash路径 #

在App.vue的mounted钩子中，添加逻辑处理直接访问非hash路径的情况：

mounted() {
  // 若URL无hash，将当前pathname转为hash路径
  if (!window.location.hash) {
    const targetHash = window.location.pathname;
    window.location.hash = targetHash;
    this.currentPath = `#${targetHash}`;
  }
  // 监听hash变化
  window.addEventListener('hashchange', () => {
    this.currentPath = window.location.hash;
  });
}

3. 兼容路径匹配逻辑 #

修改currentView计算属性，确保无论hash还是pathname都能匹配路由：

computed: {
  currentView() {
    // 优先取hash路径，无则取pathname，默认返回首页
    const path = this.currentPath.slice(1) || window.location.pathname || '/';
    return routes[path] || routes['/'];
  }
}

长期方案：改用vue-router的history模式 #

手动实现路由容易出现兼容性问题，推荐使用官方的vue-router实现更稳定的history模式（无#的URL）：

1. 安装vue-router #

根据Vue版本选择对应版本：

# Vue2 版本
npm install vue-router@3
# Vue3 版本
npm install vue-router@4

2. 创建路由配置文件 #

在项目中新建router/index.js：

import Vue from 'vue';
import VueRouter from 'vue-router';
import LandingPage from '../LandingPage.vue';
import HistoryPage from '../History.vue';
import FindPokemon from '../FindPokemon.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: LandingPage },
  { path: '/history', component: HistoryPage },
  { path: '/findpokemon', component: FindPokemon }
];

const router = new VueRouter({
  mode: 'history', // 启用history模式
  routes
});

export default router;

3. 在入口文件引入路由 #

修改main.js：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

4. 改造App.vue和导航栏 #

App.vue去掉手动路由逻辑，改用路由视图容器：

<template>
  <navBar></navBar>
  <router-view /> <!-- 路由匹配的组件会渲染在这里 -->
</template>

<script>
import navBar from './components/nav-bar.vue';

export default {
  components: { navBar }
};
</script>

导航栏改用<router-link>实现前端路由跳转，并自动处理激活状态：

<template>
  <nav class="navbar navbar-expand-lg bg-light navbar-light px-3 py-3 sticky-top">
    <div class="container-fluid">
      <router-link class="navbar-brand" to="/">
        <img src="../assets/pokemon_logo.png" alt="pokemonLogo" height="30"/>
      </router-link>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse px-2" id="navbarText">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <router-link 
              class="nav-link" 
              :class="{ active: $route.path === '/history' }" 
              to="/history"
            >
              History
            </router-link>
          </li>
          <li class="nav-item">
            <router-link 
              class="nav-link" 
              :class="{ active: $route.path === '/findpokemon' }" 
              to="/findpokemon"
            >
              Find Pokemon
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</template>

<script>
export default {
  name: 'navBar'
};
</script>

5. 服务器配置关键步骤 #

history模式下，直接访问/history这类路径会返回404，需要配置服务器将所有请求重定向到index.html。以Nginx为例：

location / {
  try_files $uri $uri/ /index.html;
}

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