前端小知识分享：Vue项目路由跳转以及导航守卫

2023-09-24 20:12:13

Vue项目中的路由跳转

在Vue项目中，路由是一种在不同页面之间进行导航的方式。我们可以使用Vue Router库来管理路由。Vue Router是一个官方的Vue.js路由管理器，它提供了多种功能，如路由嵌套、路由别名、路由守卫等。

路由配置

要使用Vue Router，我们需要在Vue项目中安装它。我们可以使用以下命令来安装Vue Router：

npm install vue-router

安装完成后，我们需要在Vue项目中配置路由。我们可以创建一个名为router.js的文件，并将其添加到Vue项目的src目录中。在router.js文件中，我们可以使用VueRouter类来创建路由实例，并配置路由规则。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

const router = new VueRouter({
  routes
})

export default router

在上面的代码中，我们创建了两个路由规则，一个用于/路径，另一个用于/about路径。当用户访问/路径时，将显示Home组件，当用户访问/about路径时，将显示About组件。

路由跳转

我们可以使用router.push()方法来实现路由跳转。router.push()方法接受一个路径参数，该参数指定要跳转到的路径。例如，以下代码将用户重定向到/about路径：

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

我们还可以在路由跳转时传递参数。例如，以下代码将用户重定向到/about路径，并传递一个名为id的参数，其值为1：

this.$router.push({ path: '/about', query: { id: 1 } })

Vue项目中的导航守卫

导航守卫是一种在路由之间导航时执行代码的方式。我们可以使用导航守卫来控制路由之间的导航，例如，我们可以使用导航守卫来检查用户是否已登录，如果用户未登录，则可以将其重定向到登录页面。

全局导航守卫

全局导航守卫是在任何路由导航时都会执行的守卫。我们可以使用router.beforeEach()方法来注册全局导航守卫。router.beforeEach()方法接受一个回调函数，该回调函数将在每次路由导航时执行。

router.beforeEach((to, from, next) => {
  // 检查用户是否已登录
  if (this.$store.getters.isLoggedIn) {
    // 如果用户已登录，则允许导航继续
    next()
  } else {
    // 如果用户未登录，则重定向到登录页面
    next('/login')
  }
})

组件导航守卫

组件导航守卫是在组件被激活或离开时执行的守卫。我们可以使用beforeRouteEnter()、beforeRouteUpdate()和beforeRouteLeave()方法来注册组件导航守卫。

export default {
  beforeRouteEnter(to, from, next) {
    // 检查用户是否已登录
    if (this.$store.getters.isLoggedIn) {
      // 如果用户已登录，则允许导航继续
      next()
    } else {
      // 如果用户未登录，则重定向到登录页面
      next('/login')
    }
  },
  beforeRouteUpdate(to, from, next) {
    // 在组件更新之前执行
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 在组件离开之前执行
    next()
  }
}