Vue.js开发模式下页面刷新/直接访问子路由后如何维持当前路由？

老哥，我看你这问题是Vue Router在history模式下的经典坑！直接访问http://localhost:5000/counter或者刷新页面就跳回默认路由，大概率是这几个地方没配置对，给你一步步排查解决：

1. 先确认Router实例的模式配置 #

默认情况下Vue Router用的是hash模式（URL带#），如果你要去掉#用history模式，必须显式配置mode: 'history'，否则直接访问子路由会被服务器当成静态文件请求，返回404后可能被你配置的默认路由接管跳回/。

检查你的Router创建代码，应该改成这样（适配你的TypeScript写法）：

import Vue from 'vue'
import Router from 'vue-router'
import Counter from './views/Counter.vue'
import Home from './views/Home.vue'

Vue.use(Router as any)

export default new Router({
  mode: 'history', // 关键：开启history模式
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/counter',
      name: 'counter',
      component: Counter
    }
  ]
})

2. 配置本地开发服务器支持history模式 #

history模式下，直接访问子路由（比如/counter）或者刷新时，浏览器会向服务器发送该路径的请求，但你的Vue项目是单页应用，只有根目录的index.html是入口，服务器找不到对应文件会返回404，这时候就会触发你可能配置的通配符重定向跳回/。

如果你用的是Vue CLI搭建的项目，本地开发服务器已经默认处理了这个问题，不用额外配置；但如果是自定义的开发服务器（比如Express），需要加个重定向规则：

const express = require('express')
const path = require('path')
const app = express()

// 托管静态资源
app.use(express.static(path.join(__dirname, 'dist')))

// 所有请求都返回index.html，让Vue Router处理路由
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'))
})

app.listen(5000, () => {
  console.log('Server running on http://localhost:5000')
})

3. 排查导航守卫和路由重定向规则 #

检查你有没有设置全局导航守卫（router.beforeEach）里强制跳转到/的逻辑，比如这种坑人的代码：

router.beforeEach((to, from, next) => {
  // 错误示例：所有非/路由都跳回首页
  if (to.path !== '/') {
    next('/')
  } else {
    next()
  }
})

如果有类似逻辑，赶紧修改成你实际需要的规则（比如只在未登录时跳转）。

另外检查有没有配置通配符路由{ path: '*', redirect: '/' }，如果你的/counter路由配置错误（比如路径写错、组件未注册），就会匹配到这个通配符路由跳回/，所以要确保/counter的路由配置完全正确。

4. 验证组件注册是否正常 #

确保Counter组件已经正确导入并注册，没有语法错误或者路径错误，否则路由匹配失败也会触发重定向。

按这几步排查下来，基本就能解决直接访问/刷新跳回/的问题了！

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