一、使用方法
Vue.js 提供了编程式导航的功能,可以通过 JavaScript 的方式实现页面跳转。
1.使用 $router.push 方法进行导航
$router.push 方法可以在当前路由添加一个新的路由记录,并且会向 history 栈添加一个新的记录,使用户可以后退到之前的页面。例如:
// 导航到 /home 页面
this.$router.push('/home')
// 通过命名路由导航
this.$router.push({ name: 'home' })
// 带有查询参数的导航
this.$router.push({ path: '/home', query: { id: 1 } })
// 带有 hash 的导航
this.$router.push({ path: '/home', hash: '#anchor' })
2.使用 $router.replace 方法进行导航
$router.replace 方法和 $router.push 方法类似,不同的是它不会向 history 栈添加新的记录,而是替换当前的路由记录。例如:
// 替换当前路由为 /about 页面
this.$router.replace('/about')
// 通过命名路由替换当前路由
this.$router.replace({ name: 'about' })
// 带有查询参数的替换
this.$router.replace({ path: '/about', query: { id: 1 } })
// 带有 hash 的替换
this.$router.replace({ path: '/about', hash: '#anchor' })
3.使用 $router.go 方法进行导航
$router.go 方法可以在浏览器的 history 栈中向前或向后移动若干步。例如:
// 向后退一步
this.$router.go(-1)
// 向前进一步
this.$router.go(1)
4.使用 $router.back 方法进行导航
$router.back 方法可以让用户返回到上一个页面,相当于执行 $router.go(-1)。例如:
// 返回上一个页面
this.$router.back()
二、使用场景
编程式导航一般用于以下场景:
-
表单提交后跳转到另一个页面:通常在表单提交后,需要将用户导航到一个结果页面来显示提交的结果。可以使用编程式导航实现这个功能。
-
权限控制:有些页面需要根据用户的权限进行访问控制。可以使用编程式导航来判断用户是否有访问权限,并决定是否跳转到该页面。
-
动态路由:有些页面需要根据不同的参数生成不同的路由。可以使用编程式导航来生成动态路由。
-
路由拦截:有些情况下需要在路由跳转前进行拦截,比如用户未登录时禁止访问某些页面。可以使用编程式导航来实现路由拦截。
拿权限控制举个例子:
即有些页面需要根据用户的权限进行访问控制。可能存在某些页面只允许管理员或者特定用户才能访问,而其他普通用户则无法访问。
在这种情况下,可以使用编程式导航来实现权限控制。就是说,可以在路由跳转前进行拦截,在拦截函数中判断当前用户是否有访问该页面的权限,如果没有,则跳转到登录页面或者其他提示页面。
const router = new VueRouter({
routes: [
{
path: '/admin',
component: AdminPage,
beforeEnter: (to, from, next) => {
if (store.state.user.role !== 'admin') {
// 如果不是管理员,则跳转到错误页面
next('/error')
} else {
// 否则继续跳转到目标页面
next()
}
}
}
]
})
上面的beforeEnter :()为生命周期函数,也叫钩子函数,是一种 Vue.js 路由中的路由独享守卫。它可以在进入某个路由前被调用,用于拦截路由并进行相应的处理