《Vue应用开发》课件——5.7编程式导航push()方法.pptxVIP

编程式导航5.7

先定一个小目标！掌握编程式导航的使用方法，能够灵活应用编程式导航5.7编程式导航

什么是编程式导航？5.7编程式导航

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

VueRouter提供了useRouter()函数，使用它可以获取全局路由实例，该全局路由实例中提供了常用的push()方法、replace()方法和go()方法，获取全局路由实例的示例代码如下。scriptsetupimport{useRouter}fromvue-routerconstrouter=useRouter()/script全局路由实例5.7编程式导航

push()方法会向历史记录中添加一个新的记录，以编程方式导航到一个新的URL。当用户单击浏览器后退按钮时，会回到之前的URL。push()方法的参数可以是一个字符串路径，或者一个描述地址的对象，示例代码如下。router.push(/about/tab1) //字符串路径router.push({path:/about/tab1}) //带有路径的对象router.push({name:us