如何在Vue專案中使用路由實現頁面攔截和跳躍處理？

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 定义路由规则
const routes = [
  // 路由配置
]

// 创建路由实例
const router = new VueRouter({
  routes
})

// 将路由实例注入根Vue实例中
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

router.beforeEach((to, from, next) => {
  // 判断是否需要登录态
  if (to.meta.requireAuth) {
    // 判断是否已登录
    if (isLogin()) {
      // 已登录，可以继续跳转
      next()
    } else {
      // 未登录，跳转到登录页
      next('/login')
    }
  } else {
    // 不需要登录态，直接跳转
    next()
  }
})

const routes = [
  {
    path: '/login',
    component: Login
  },
  {
    path: '/home',
    component: Home,
    meta: { requireAuth: true } // 需要登录态
  },
  {
    path: '/about',
    component: About,
    meta: { requireAuth: false } // 不需要登录态
  }
]

methods: {
  login() {
    // 登录操作
    // ...

    // 登录成功后，跳转到目标页面
    this.$router.push('/home')
  }
}