vue는 라우팅을 통해 인터페이스에 액세스하지 않습니다.-프런트엔드 Q&A-php.cn

프런트엔드 개발 기술의 지속적인 발전으로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!