vue tidak mengakses antara muka melalui penghalaan

Dengan kemajuan berterusan teknologi pembangunan bahagian hadapan, Vue telah menjadi salah satu rangka kerja yang amat diperlukan dalam pembangunan web. Ia adalah penggunaan biasa Vue untuk bertukar antara halaman melalui penghalaan, tetapi kadangkala, kita juga perlu mengakses halaman melalui cara lain. Artikel ini akan memperkenalkan cara untuk mengakses antara muka tanpa penghalaan dalam Vue.

1. Pengetahuan pra-syarat

Sebelum memperkenalkan cara mengakses antara muka Vue, kita perlu memahami beberapa pengetahuan pra-syarat:

1

Komponen Vue ialah salah satu ciri Vue.js yang paling berkuasa. Komponen boleh memisahkan kod dan menjadikannya lebih mudah untuk digunakan semula dan diselenggara.

2. Penghalaan Vue

Penghalaan Vue ialah pemalam yang disediakan secara rasmi oleh Vue.js, yang digunakan untuk melaksanakan penukaran penghalaan antara halaman.

3. Instance Vue

Instance Vue ialah instance objek Vue.js dan mewakili aplikasi Vue. Kejadian Vue boleh digunakan untuk mengawal elemen DOM, atau untuk digunakan dengan komponen Vue.

4. Pengawal laluan

Pengawal laluan ialah fungsi penting penghalaan Vue, yang digunakan untuk mengawal kebenaran akses halaman, melaksanakan prapemprosesan halaman dan fungsi lain.

2. Pilihan 1: Gunakan tika Vue untuk mengakses komponen

Kami boleh mengakses komponen melalui kejadian Vue Dalam pembangunan sebenar, kami biasanya menyimpan tika ini dalam pembolehubah global dan Panggil terus apabila akses diperlukan.

1. Cipta tika Vue

Apabila mencipta tika Vue, kita boleh menyimpan tika itu dalam pembolehubah global untuk akses langsung seterusnya.

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

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

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

2. Akses komponen

Melalui pembolehubah global

, kita boleh mengakses objek contoh Vue, dan kemudian mengakses komponen melalui window.vm. vm.$refs

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

Di mana,

ialah nama komponen dan componentName ialah nama kaedah dalam komponen. Dengan cara ini kita boleh mengakses komponen tanpa melalui penghalaan. methodName()

3 Pilihan 2: Gunakan pengawal laluan untuk mengawal hak akses halaman

Dalam beberapa kes, kami mungkin perlu mengawal hak akses halaman pada masa ini, kami boleh mempertimbangkan untuk menggunakan pengawal penghalaan .

1. Tambah pengawal penghalaan

Kami boleh menambah pengawal penghalaan dalam konfigurasi penghalaan untuk mengawal sama ada halaman itu boleh diakses dengan menilai beberapa syarat.

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()
  }
})

Dalam kod di atas, kami menambahkan medan

pada pageA dalam konfigurasi penghalaan dan mengawal kebenaran akses halaman dengan menilai nilai medan ini dalam pengawal penghalaan. requireAuth

2. Lompat halaman

Apabila kita perlu mengakses halaman yang ditentukan, kita boleh melompat ke halaman melalui kaedah

. $router.push()

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

Dalam kod di atas, kami menggunakan kaedah

untuk melompat ke halaman $router.push() dan lulus parameter pageA . foo: 'bar'

4. Ringkasan

Artikel ini memperkenalkan dua cara untuk melaksanakan akses antara muka dalam Vue tanpa penghalaan: menggunakan tika Vue untuk mengakses komponen dan menggunakan pengawal laluan untuk mengawal kebenaran akses halaman. Dalam pembangunan sebenar, kita boleh memilih kaedah yang sesuai mengikut keperluan tertentu. Tidak kira kaedah yang digunakan, kita harus biasa dengan pengetahuan asas Vue dan mengikuti struktur kod yang munasabah untuk memudahkan penyelenggaraan dan peningkatan kod.

Atas ialah kandungan terperinci vue tidak mengakses antara muka melalui penghalaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!