Vue Router哈希模式异常：为何跳转路径不符合预期？

1. 确认Vue Router的模式配置 #

Vue Router 2默认采用哈希模式，但如果显式配置时出错，会导致路径解析异常。检查你的路由初始化代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Page from './views/Page.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/page', component: Page }
]

const router = new VueRouter({
  // 确保此处为哈希模式，默认即为hash，手动配置时不要写错
  mode: 'hash',
  routes
})

export default router

若误将mode设为history，且服务器未配置SPA fallback规则，会导致路径解析混乱，出现#位置错误的情况。

2. 检查路由的base配置 #

如果项目部署在子路径下，可能会配置base属性，但错误的base值（比如包含#）会导致路径拼接异常。例如：

// 错误示例
const router = new VueRouter({
  mode: 'hash',
  base: '/page#/', // 该配置会导致路径错误拼接
  routes
})

确保base仅填写正确的子路径（如部署在/app/下则设为base: '/app/'），无需包含#，默认场景下留空即可。

3. 排查自定义导航逻辑的干扰 #

检查全局路由守卫（如router.beforeEach）或组件内的导航钩子，确认是否有代码篡改了to对象的路径，或是手动调用router.push时传入了错误格式的路径。比如：

// 错误示例：手动拼接路径时出错
router.beforeEach((to, from, next) => {
  // 错误地将路径与#拼接
  next(to.path + '#/')
})

这类自定义逻辑会覆盖router-link的正常跳转路径，引发异常。

4. 确认router-link的使用正确性 #

虽然你填写的是<router-link to="/page" />，但仍需检查是否存在拼写错误（比如to属性值多写斜杠或特殊字符），或是父组件中存在自定义的router-link包装组件/指令，篡改了跳转路径。

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