Vue中的编程试导航——使用方法、使用场景介绍

一、使用方法

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()

二、使用场景

编程式导航一般用于以下场景：

1. 表单提交后跳转到另一个页面：通常在表单提交后，需要将用户导航到一个结果页面来显示提交的结果。可以使用编程式导航实现这个功能。

2. 权限控制：有些页面需要根据用户的权限进行访问控制。可以使用编程式导航来判断用户是否有访问权限，并决定是否跳转到该页面。

3. 动态路由：有些页面需要根据不同的参数生成不同的路由。可以使用编程式导航来生成动态路由。

4. 路由拦截：有些情况下需要在路由跳转前进行拦截，比如用户未登录时禁止访问某些页面。可以使用编程式导航来实现路由拦截。

拿权限控制举个例子：

        即有些页面需要根据用户的权限进行访问控制。可能存在某些页面只允许管理员或者特定用户才能访问，而其他普通用户则无法访问。

        在这种情况下，可以使用编程式导航来实现权限控制。就是说，可以在路由跳转前进行拦截，在拦截函数中判断当前用户是否有访问该页面的权限，如果没有，则跳转到登录页面或者其他提示页面。

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 路由中的路由独享守卫。它可以在进入某个路由前被调用，用于拦截路由并进行相应的处理