vue는 라우팅을 통해 인터페이스에 액세스하지 않습니다.

프런트엔드 개발 기술의 지속적인 발전으로 Vue는 웹 개발에 없어서는 안 될 프레임워크 중 하나가 되었습니다. 라우팅을 통해 페이지 간을 전환하는 것이 Vue의 일반적인 사용법이지만 때로는 다른 방법을 통해 페이지에 액세스해야 할 수도 있습니다. 이 글에서는 Vue에서 라우팅하지 않고 인터페이스에 접근하는 방법을 소개합니다.

1. 사전 지식

Vue 인터페이스에 액세스하는 방법을 소개하기 전에 몇 가지 사전 지식을 이해해야 합니다.

1. Vue 구성 요소

Vue 구성 요소는 Vue.js의 가장 강력한 기능 중 하나입니다. . 구성 요소는 코드를 분리하여 재사용 및 유지 관리를 더 쉽게 만듭니다.

2. Vue 라우팅

Vue 라우팅은 Vue.js에서 공식 제공하는 플러그인으로, 페이지 간 라우팅 전환을 구현하는 데 사용됩니다.

3. Vue 인스턴스

Vue 인스턴스는 Vue.js의 객체 인스턴스이며 Vue 애플리케이션을 나타냅니다. Vue 인스턴스는 DOM 요소를 제어하거나 Vue 구성 요소와 함께 사용하는 데 사용할 수 있습니다.

4. 경로 가드

경로 가드는 페이지 액세스 권한을 제어하고 페이지 전처리 및 기타 기능을 구현하는 데 사용되는 Vue 라우팅의 중요한 기능입니다.

2. 옵션 1: Vue 인스턴스를 사용하여 구성 요소에 액세스

실제 개발에서는 일반적으로 이 인스턴스를 전역 변수에 저장하고 액세스가 필요할 때 직접 호출합니다.

1. Vue 인스턴스 만들기

Vue 인스턴스를 만들 때 후속 직접 액세스를 위해 인스턴스를 전역 변수에 저장할 수 있습니다.

import Vue from 'vue'
import App from './App.vue'

const vm = new Vue({
  el: '#app',
  render: h => h(App)
})

// 把 Vue 实例存储在全局变量中
window.vm = vm

2. 구성 요소에 액세스

전역 변수 window.vm을 통해 Vue 인스턴스 개체에 액세스한 다음 vm.$refs를 통해 구성 요소에 액세스할 수 있습니다. window.vm ，我们可以访问 Vue 实例对象，然后通过 vm.$refs 访问组件。

window.vm.$refs.componentName.methodName()

其中，componentName 是组件的名称，methodName() 是组件中的方法名称。通过这种方式，我们就可以在不通过路由的情况下访问组件。

三、方案二：使用路由守卫控制页面访问权限

在某些情况下，我们可能需要对页面进行访问权限的控制，这时候就可以考虑使用路由守卫来实现。

1、添加路由守卫

我们可以在路由配置中添加路由守卫，通过判断一些条件来控制页面是否可以访问。

const router = new VueRouter({
  routes: [
    {
      path: '/pageA',
      name: 'pageA',
      component: PageA,
      meta: {
        requireAuth: true  // 添加一个自定义字段 requireAuth
      }
    },
    {
      path: '/pageB',
      name: 'pageB',
      component: PageB,
      meta: {
        requireAuth: false
      }
    }
  ]
})

// 添加路由守卫
router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    // 判断用户是否登录
    if (isLogin()) {
      next()
    } else {
      // 跳转到登录页
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    }
  } else {
    next()
  }
})

以上代码中，我们给路由配置中的 pageA 添加了一个 requireAuth 字段，并在路由守卫中通过判断这个字段的值来控制页面访问权限。

2、跳转页面

在需要访问指定页面时，我们可以通过 $router.push() 方法来跳转页面。

this.$router.push({
  path: '/pageA',
  query: {
    foo: 'bar'
  }
})

以上代码中，我们使用 $router.push() 方法跳转到了 pageA 页面，并传递了一个参数 foo: 'bar'rrreee

여기서 comComponentName은 구성 요소의 이름이고 methodName()은 구성 요소의 메서드 이름입니다. 이렇게 하면 라우팅을 거치지 않고 구성 요소에 액세스할 수 있습니다.

3. 옵션 2: 라우팅 가드를 사용하여 페이지 액세스 권한 제어

경우에 따라 페이지 액세스 권한을 제어해야 할 수도 있습니다. 이를 달성하기 위해 라우팅 가드 사용을 고려할 수 있습니다. 🎜🎜1. 라우팅 가드 추가🎜🎜라우팅 구성에 라우팅 가드를 추가하여 일부 조건을 판단하여 페이지에 액세스할 수 있는지 여부를 제어할 수 있습니다. 🎜rrreee🎜위 코드에서는 라우팅 구성의 pageA에 requireAuth 필드를 추가하고 라우팅 가드에서 이 필드의 값을 판단하여 페이지 액세스 권한을 제어했습니다. . 🎜🎜2. 페이지로 이동🎜🎜지정된 페이지에 액세스해야 할 경우 $router.push() 메소드를 통해 해당 페이지로 이동할 수 있습니다. 🎜rrreee🎜위 코드에서는 $router.push() 메서드를 사용하여 pageA 페이지로 이동하고 foo: 'bar 매개변수를 전달했습니다. ' . 🎜🎜4. 요약🎜🎜이 글에서는 라우팅 없이 Vue에서 인터페이스 액세스를 구현하는 두 가지 방법, 즉 Vue 인스턴스를 사용하여 구성 요소에 액세스하고 경로 가드를 사용하여 페이지 액세스 권한을 제어하는 ​​방법을 소개합니다. 실제 개발에서는 특정 요구에 따라 적절한 방법을 선택할 수 있습니다. 어떤 방법을 사용하든 Vue에 대한 기본 지식을 숙지하고 합리적인 코드 구조를 따라야 코드 유지 관리 및 업그레이드가 용이합니다. 🎜

위 내용은 vue는 라우팅을 통해 인터페이스에 액세스하지 않습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!