Vue Router URL无响应：页面跳转正常但地址不更新，直接访问路径无效

你遇到的两个问题（跳转不改变URL、直接访问子路径加载首页），根源是Vue Router选了错误的历史模式，按下面步骤修正即可：

1. 替换历史模式 #

把main.js里的createMemoryHistory()换成createWebHistory()——这个才是浏览器环境下用来操作地址栏URL的模式。修改后的代码：

import { createRouter, createWebHistory } from 'vue-router'
// 其他导入代码不变

const routes = [
  { path: '/', component: Home },
  { path: '/explore', component: Explorer },
]

const router = createRouter({
  history: createWebHistory(), // 这里是修改点
  routes,
})

createApp(App).use(router).mount('#app')

2. 为什么会出问题？ #

• createMemoryHistory()是给非浏览器场景（比如服务器渲染、单元测试）用的，它不会修改浏览器地址栏，所以点按钮跳转时URL没变化。
• 直接访问localhost:8080/explore加载首页，是因为内存历史模式不处理浏览器的URL请求，所有请求都落到首页，Router也没法解析对应路径。

3. 开发服务器无需额外配置 #

你用的Vue模板开发服务器，默认已经配置了把所有请求重定向到index.html，换完历史模式后，直接通过URL访问子页面的问题就会自动解决。

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