什么是编程式导航？

在Vue中，页面有两种导航方式，分别是声明式导航和编程式导航。其中，使用<router-link>标签定义导航链接的方式属于声明式导航。而编程式导航是先通过useRouter()函数获取全局路由实例，然后通过调用全局路由实例实现导航。

Vue Router提供了useRouter()函数，使用它可以获取全局路由实例，该全局路由实例中提供了常用的push()方法、replace()方法和go()方法，获取全局路由实例的示例代码如下。

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()；//全局路由实例
</script>

1. push()方法

push()方法会向历史记录中添加一个新的记录，以编程方式导航到一个新的URL。当用户单击浏览器后退按钮时，会回到之前的URL。push()方法的参数可以是一个字符串路径，或者一个描述地址的对象。

示例代码如下。

router.push('/about/tab1')			// 字符串路径
router.push({ path: '/about/tab1' })		// 带有路径的对象
router.push({ name: 'user', params: { userId: '123'} })	// 命名路由
router.push({ path: '/user', query: { id: '1' } })		// 带查询参数，如：/user?id=1
router.push({ path: '/user', hash: '#admin' })		// 带有Hash值，如：/user#admin

如果在参数的对象中提供了path，则params会被忽略。为了传递参数，需要提供路由的name或者手动拼接带有参数的path，示例代码如下。

const id = '123'
router.push({ name: '/user', params: { userId } })	// 跳转到/user/123
router.push({ path: `/user/${userId}` })           	// 跳转到/user/123
// 以下是params不生效的情况
router.push({ path: '/user', params: { userId } })	// 跳转到/user

演示push()方法的使用

使用push()方法实现单击Home组件的“跳转到MovieDetails组件”链接跳转到MovieDetails组件，并在页面中获取id值。

修改src\components\Home.vue文件，定义一个按钮，用于跳转到MovieDetails组件，并传递参数。

<template>
  <div class="home-container">
   <h3>Home 组件</h3>
   <a href="#" @click.prevent="gotoMovie(3)">跳转到MovieDetails组件</a>    //绑定gotoMovie()方法
  </div>
</template>

在src\components\Home.vue文件中编写gotoMovie()方法，调用router.push()方法实现路由跳转，需要设置要跳转到的路由名称和携带的路由参数。

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const gotoMovie = movieId => {
  router.push({
    name: 'MovieDetails', params: { id: movieId }
  })
}
</script>

3. go()方法

go()方法用于实现前进或后退的效果，其参数表示历史记录中前进或后退的步数，类似于window.history.go()，相应的地址栏也会发生改变。

• go(1)表示前进一条记录。

• go(-1)表示后退一条记录。

演示go()方法的使用

使用go()方法实现单击MovieDetails组件的“后退”按钮后返回到Home组件的效果。

修改src\components\MovieDetails.vue文件，在该文件中定义一个按钮，用于后退到上一个组件页面。

<template>
  <p>电影{{id}}页面</p>
  <button @click="goBack">后退</button>  //绑定goBack()方法
</template>

在src\components\MovieDetails.vue文件中编写goBack()方法，调用router.go()方法实现后退效果。

import { useRouter } from 'vue-router'
const router = useRouter()
const goBack = () => {
  router.go(-1)
}

在浏览器中访问http://127.0.0.1:5173/。先单击“首页”链接切换到首页，然后单击“跳转到MovieDetails组件”，查看添加了“后退”按钮的页面效果，如下图所示。

2. replace()方法

replace()方法与push()方法类似，都是以编程方式导航到一个新的URL。replace()方法在导航后不会向历史记录中添加新的记录，而是会替换历史记录中的当前记录。

在声明式导航中，为<router-link>标签添加replace属性也能实现与replace()方法类似的效果，示例代码如下。

// 编程式导航
router.replace({ path: '/user' })
<!-- 声明式导航 -->
<router-link :to="{ path: '/user' }" replace></router-link>