Vue编程式导航

1、什么是编程式导航

编程式导航是指通过代码来进行页面跳转或导航的方法。它在前端框架中常用于在用户交互或特定条件下实现页面的跳转、重定向或刷新。

在Vue.js中，Vue Router提供了一种编程式导航的方式来进行路由操作。它允许你通过调用this.$router对象的方法来实现页面的跳转。

1、常见的编程式导航方法包括：

• push：用于向历史记录中添加一个新的路由，并在浏览器URL地址上更新。
• replace：用于替换当前的路由，不会向历史记录中添加新的路由。
• go：用于在历史记录中前进或后退多少步。
• forward：前进一步，在历史记录中前进到下一个页面。
• back：后退一步，在历史记录中返回到上一个页面。

这些方法可以与具体路径、命名的路由或者带有路由参数的对象一起使用，以实现不同的导航需求。

2、两种跳转方式
例如：跳转到’/about’路径上的页面

路径跳转:

//路由规则配置
const routes=[
    {
        path:'/about',
        component:AboutView
    },
]

this.$router.push('/about')

或者

this.$router.push{(
path:'/about'
)}

通过路由名字跳转：此时要给路由规则加上name属性

//路由规则配置
const routes=[
    {
        path:'/about',
        name:'about',
        component:AboutView
    },
]

this.$router.push({
        name:'about'
      })

2、应用场景

下面是一些常见的应用场景，适合使用编程式导航：

1. 登录后页面跳转：在用户成功登录后，将其自动跳转到登录后的页面，如首页、个人资料页等。

2. 表单提交后页面跳转：在表单提交成功后，将用户自动导航到显示提交成功信息的页面，或跳转到其他相关页面。

3. 导航步骤引导：用户在多个页面之间按照特定的顺序进行操作，可以使用编程式导航在操作完成后自动跳转到下一步或上一步页面。

4. 动态路由参数导航：根据某种条件动态生成路由，并进行页面跳转。例如，根据用户选择的城市或日期，在前端生成相应的动态路由并进行跳转。

5. 权限控制导航：根据用户的角色或权限，动态操纵导航实现不同的页面访问控制。例如，当普通用户尝试访问管理员页面时，可以使用编程式导航将其重定向到没有权限的页面。

6. 路由守卫导航拦截：使用编程式导航来处理路由守卫中的拦截逻辑，例如在需要进行身份验证的页面或特定条件下，通过编程式导航将用户重定向到其他页面或登录页。

7. 应用内部的链接跳转：在应用程序的不同部分或组件之间进行导航。例如，在购物车页面点击"继续购物"按钮时，使用编程式导航返回商品列表页。

3、案例演示

例如当我们在登录页面点击登录按钮，跳转到首页的过程

我们将一个按钮与 this.$router 进行编程式导航绑定时，可以通过使用 Vue.js 的模板语法以及事件绑定来实现。

首先，在你的按钮标签中添加一个点击事件，并调用一个自定义的方法，例如 navigateToPage：

<button @click="navigateToPage">跳转页面</button>

接下来，在 Vue.js 对应的组件中，定义 navigateToPage 方法，并在该方法内部使用 this.$router.push() 或其他合适的导航方法进行页面跳转：

methods: {
  navigateToPage() {
    // 使用 this.$router.push() 进行页面跳转
    this.$router.push('/home');
  }
}

完整示例：

<template>
  <div>
    <button @click="navigateToPage">跳转页面</button>
  </div>
</template>

<script>
export default {
  methods: {
    navigateToPage() {
      this.$router.push('/home'); // 使用 this.$router.push() 进行页面跳转
    }
  }
}
</script>

这样，当用户点击按钮时，navigateToPage 方法会被触发，然后调用 this.$router.push() 实现编程式导航到 /home 页面。

注意：前提确保已正确配置了 Vue Router，并且在使用 this.$router 之前，Vue Router 已经被注入到了 Vue 根实例或相关的子组件中。