vue n'accède pas à l'interface via le routage

Avec l'avancement continu de la technologie de développement front-end, Vue est devenu l'un des frameworks indispensables au développement Web. C'est une utilisation courante de Vue pour basculer entre les pages via le routage, mais parfois, nous devons également accéder aux pages par d'autres moyens. Cet article expliquera comment accéder à l'interface sans routage dans Vue.

1. Connaissances pré-requises

Avant de présenter comment accéder à l'interface Vue, nous devons comprendre quelques connaissances pré-requises :

1 . Composants Vue

Les composants Vue sont l'une des fonctionnalités les plus puissantes de Vue.js. Les composants peuvent découpler le code et faciliter sa réutilisation et sa maintenance.

2. Routage Vue

Le routage Vue est un plug-in officiellement fourni par Vue.js, qui est utilisé pour basculer les itinéraires entre les pages.

3. Instance Vue

L'instance Vue est une instance d'objet de Vue.js, représentant une application Vue. Les instances Vue peuvent être utilisées pour contrôler un élément DOM ou pour être utilisées avec des composants Vue.

4. Route guard

Route guard est une fonction importante du routage Vue, qui est utilisée pour contrôler les autorisations d'accès aux pages, implémenter le prétraitement des pages et d'autres fonctions.

2. Solution 1 : Utilisez l'instance Vue pour accéder au composant

Nous pouvons accéder au composant via l'instance Vue Dans le développement réel, nous stockons généralement cette instance dans un fichier global. variable et appelez-la directement lorsque l’accès est nécessaire.

1. Créer une instance Vue

Lors de la création d'une instance Vue, nous pouvons stocker l'instance dans une variable globale pour un accès direct ultérieur.

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

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

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

2. Accéder aux composants

Grâce à la variable globale window.vm, nous pouvons accéder à l'objet instance Vue, puis transmettre vm.$ refs Accéder aux composants. 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

Où, componentName est le nom du composant et methodName() est le nom de la méthode dans le composant. De cette façon, nous pouvons accéder au composant sans passer par le routage.

3. Option 2 : Utiliser des gardes de routage pour contrôler l'accès aux pages

Dans certains cas, nous pouvons avoir besoin de contrôler l'accès aux pages, ce qui peut être envisagé pour le moment Utiliser des gardes de route pour y parvenir. #🎜🎜##🎜🎜#1. Ajouter des gardes de routage #🎜🎜##🎜🎜# Nous pouvons ajouter des gardes de routage dans la configuration de routage pour contrôler si la page est accessible en jugeant certaines conditions. #🎜🎜#rrreee#🎜🎜#Dans le code ci-dessus, nous avons ajouté un champ requireAuth à pageA dans la configuration de routage, et avons jugé la valeur de ce champ dans le routage guard Valeur pour contrôler les autorisations d’accès à la page. #🎜🎜##🎜🎜#2. Aller à la page #🎜🎜##🎜🎜#Lorsque nous avons besoin d'accéder à la page spécifiée, nous pouvons accéder à la page via $router.push() méthode. #🎜🎜#rrreee#🎜🎜#Dans le code ci-dessus, nous utilisons la méthode $router.push() pour accéder à la page pageA et passer un paramètre foo: 'bar' . #🎜🎜##🎜🎜#4. Résumé#🎜🎜##🎜🎜#Cet article présente deux façons d'implémenter l'accès à l'interface dans Vue sans routage : utiliser les instances de Vue pour accéder aux composants et utiliser les gardes de route pour contrôler les autorisations d'accès aux pages. Dans le développement réel, nous pouvons choisir la méthode appropriée en fonction de besoins spécifiques. Quelle que soit la méthode utilisée, nous devons connaître les connaissances de base de Vue et suivre une structure de code raisonnable pour faciliter la maintenance et les mises à niveau du code. #🎜🎜#

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!