Vue Router中与window.location.href等效的无刷新页面跳转方法是什么？

在Vue单页应用（SPA）里，用window.location.href会触发整页刷新，导致内存中的缓存数据丢失，正确的做法是使用Vue Router提供的导航能力，它能在不刷新页面的前提下更新视图。

一、声明式导航（适合模板内直接跳转） #

用Vue Router内置的<router-link>组件，这是最直接的无刷新跳转方式：

<!-- 在模板中使用，点击后跳转到/subpage -->
<router-link to="/subpage">前往子页面</router-link>

这个组件会自动拦截原生的a标签跳转行为，通过Vue Router更新路由视图，不会刷新页面。

二、编程式导航（适合逻辑代码中触发跳转） #

如果需要在操作完成后（比如表单提交、数据处理完成）跳转，用Vue Router的编程式导航方法：

Vue 2 / Options API

// 组件内的方法中调用
handleOperation() {
  // 执行你的业务操作（比如更新缓存）
  // ...
  
  // 跳转到目标页面
  this.$router.push('/subpage')
}

Vue 3 / Composition API

import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()

    const handleOperation = () => {
      // 执行业务操作
      // ...
      
      // 跳转
      router.push('/subpage')
    }

    return { handleOperation }
  }
}

三、基础路由配置（如果还没配置Vue Router） #

如果你的小型Vue应用还没集成Vue Router，先完成基础配置：

Vue 3 示例

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Subpage from '../views/Subpage.vue'

const routes = [
  {
    path: '/subpage',
    component: Subpage
  }
]

const router = createRouter({
  history: createWebHistory(), // 无#号的HTML5 History模式
  routes
})

export default router

然后在入口文件挂载：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

Vue 2 示例

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Subpage from '../views/Subpage.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/subpage',
    component: Subpage
  }
]

const router = new VueRouter({
  mode: 'history', // HTML5 History模式
  routes
})

export default router

入口文件挂载：

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

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

关键原理 #

Vue Router通过监听浏览器的HTML5 History API（或hash变化）来更新路由对应的组件视图，整个过程不会触发浏览器的页面刷新，因此内存中的缓存数据会被保留。

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