在vue中,页面有两种导航方式,分别是声明式导航和编程式导航。其中,使用标签定义导航链接的方式属于声明式导航;编程式导航是先通过 userRouter() 函数获取全局路由实例,然后通过调用全局路由实力实现导航。
Vue Router提供了userRouter()函数,使用它可以获取全局路由实例,示例如下:
1
全局路由实例常用的方法有push()方法、replace()方法和go()方法,下面分别进行讲解
1
1.push()方法
push()方法会向历史记录中添加一个新的记录,以编程方式导航到一个新的URL。当用户单击浏览器中的后退按钮时,会回退到之前的URL。
push()方法的参数可以是以一个字符串路径,或者一个描述地址的对象,示例如下:
1
//字符串路径
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属性
1
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
Home 组件
在上述代码中,第六行代码使用name属性设置要跳转到路由名称为MovieDetails;第七行代码使用params属性设置传递的参数id。保存上述代码,在浏览器中访问http://127.0.0.1:5173/
1
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文件,在该文件中定义一个按钮,用于后退到上一个组件,具体代码如下:
1
2
3
电影{{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组件”,查看添加了“后退”按钮,单击“后退”按钮后,会返回到首页。