编程式导航

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

    Vue Router提供了userRouter()函数，使用它可以获取全局路由实例，示例如下：

    全局路由实例常用的方法有push()方法、replace()方法和go()方法，下面分别进行讲解

1.push()方法
push()方法会向历史记录中添加一个新的记录，以编程方式导航到一个新的URL。当用户单击浏览器中的后退按钮时，会回退到之前的URL。

    push()方法的参数可以是以一个字符串路径，或者一个描述地址的对象，示例如下：

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

上述规则也适用于的to属性

    如果在参数的对象中提供了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()方法的使用。实现单机Home组件的“跳转到MovieDetails组件”链接跳转到MovieDetails组件，并在页面中获取id值，步骤如下：

    1.修改src\components\Home.vue文件，定义一个按钮，用于跳转到MovieDetails组件，并传递参数，具体代码如下：

Home 组件

    在上述代码中，第六行代码使用name属性设置要跳转到路由名称为MovieDetails；第七行代码使用params属性设置传递的参数id。保存上述代码，在浏览器中访问http://127.0.0.1:5173/

2.replace()方法
replace()方法与push()方法类似，都是以编程方式导航到一个新的URL。两者的区别在于，replace()方法在导航栏后不会像历史记录中添加新的记录，而是会替换历史记录中的当前记录。另外，在声明式导航中，为标签添加replace属性也能实现与replace()方法类似的效果，示例代码如下：

//编程式导航
router.replace({ path: ‘/user’ })

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

    接下来通过实操演示go()方法的使用。实现单机MovieDeltails组建的“后退”按钮后返回到Home组件的效果，具体步骤如下：

    1.修改src\components\MovieDeltails.vue文件，在该文件中定义一个按钮，用于后退到上一个组件，具体代码如下：

电影{{id}}页面

impore { useRouter } from ‘vue-router’
const router = useRouter()
const goBack = () => {
router.go(-1)
}
在上述代码中，3~5行代码定义了goBack()方法，其中，第四行代码调用router.go（-1）方法实现后退效果。保存上述代码，在浏览器中访问http://127.0.0.1:5173/。先单击“首页”链接切换到首页，然后单击“跳转到MovieDeltails组件”，查看添加了“后退”按钮，单击“后退”按钮后，会返回到首页。