Vue-Router 中 router.push 与 router.replace 用法详解及案例

vue-router 是 Vue.js 官方提供的路由管理器，用于构建单页面应用。在 vue-router 中，router.push 和 router.replace 是用来导航到不同页面的方法。

router.push

router.push 用于导航到一个不同的 URL，这个方法会向 history 栈添加一个新的记录，所以当用户点击浏览器后退按钮时，可以回到之前的 URL。

用法

// 字符串路径
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名路由，params 会忽略 path，如果提供了 path，params 会被忽略
router.push({ name: 'user', params: { userId: '123' } })
// 带查询参数，结果是 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' } })

案例

// 在 Vue 组件中
this.$router.push('/users/1')
// 带查询参数
this.$router.push({ path: '/search', query: { q: 'vue' } })
// 命名路由，并传递参数
this.$router.push({ name: 'user', params: { userId: 123 } })

router.replace

router.replace 和 router.push 很像，唯一的不同在于，它不会向 history 添加新记录，而是替换掉当前的 history 记录。

用法

// 字符串路径
router.replace('home')
// 对象
router.replace({ path: 'home' })
// 命名路由，params 会被添加到 URL 中
router.replace({ name: 'user', params: { userId: '123' } })
// 带查询参数
router.replace({ path: 'register', query: { plan: 'private' } })

案例

// 在 Vue 组件中
this.$router.replace('/users/1')
// 带查询参数
this.$router.replace({ path: '/search', query: { q: 'vue' } })
// 命名路由，并传递参数
this.$router.replace({ name: 'user', params: { userId: 123 } })

注意事项

• 当你使用对象作为参数传递给 router.push 或 router.replace 时，请注意 params 和 query 的区别。params 是路由的一部分，必须要在路由配置中定义；而 query 是 URL 的查询参数，不是路由的一部分。
• 如果提供了 path，params 会被忽略。你需要使用命名路由 name 来传递 params。
• router.push 和 router.replace 都返回一个 Promise，允许你等到导航完成后执行某些操作。

示例应用

下面是一个简单的 Vue 应用，使用 router.push 和 router.replace 来导航：

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import User from '@/components/User'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})
// App.vue
<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/user/1">User 1</router-link>
    <button @click="goToHome">Go to Home (push)</button>
    <button @click="replaceHome">Replace Home (replace)</button>
    <router-view/>
  </div>
</template>
<script>
export default {
  methods: {
    goToHome() {
      this.$router.push('/')
    },
    replaceHome() {
      this.$router.replace('/')
    }
  }
}
</script>

在这个例子中，点击 “Go to Home (push)” 按钮会通过 router.push 导航到主页，而点击 “Replace Home (replace)” 按钮会通过 router.replace 替换当前页面为主页。