Bagaimana untuk melaksanakan vue ubah hala

Semasa proses pembangunan aplikasi Vue, ubah hala adalah keperluan biasa Contohnya, selepas pengguna berjaya log masuk, dia perlu diubah hala ke halaman utama. Dalam artikel ini, kami akan meneroka cara melaksanakan ubah hala dalam Vue.

1. Pengawal navigasi menggunakan Penghala Vue

Penghala Vue ialah pengurus penghalaan rasmi Vue.js. Dalam Vue Router, terdapat mekanisme pengawal navigasi, fungsi utamanya adalah untuk memasuki pengawal sebelum laluan berubah dan memasuki pengawal selepas perubahan laluan.

Apabila melaksanakan fungsi ubah hala, kita boleh menggunakan fungsi pengawal navigasi Vue Router untuk memasuki pengawal sebelum laluan berubah, dan kemudian melakukan operasi ubah hala melalui objek penghalaan.

Secara khusus, kita boleh menetapkan pengawal navigasi dalam fail konfigurasi penghalaan, seperti yang ditunjukkan di bawah:

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const routes = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login.vue'),
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('@/views/home.vue'),
    meta: {
      needLogin: true, // 需要登录
    },
  },
];

const router = new Router({
  routes,
});

// 导航守卫
router.beforeEach((to, from, next) => {
  const isLogin = localStorage.getItem('token'); // 判断是否登录
  if (to.meta.needLogin) { // 判断是否需要登录
    if (isLogin) {
      next();
    } else {
      next({
        name: 'login', // 跳转到登录页面
      });
    }
  } else {
    next();
  }
});

export default router;

Dalam kod di atas, kita tentukan dahulu dua laluan, iaitu halaman log masuk dan halaman Utama. Dalam konfigurasi penghalaan halaman utama, kami menambah atribut meta untuk menandakan bahawa halaman memerlukan log masuk untuk mengakses. Kemudian, dalam pengawal navigasi, kami menentukan sama ada pengguna telah log masuk dan sama ada halaman semasa memerlukan log masuk Jika pengguna sudah log masuk dan halaman semasa memerlukan log masuk, anda boleh terus mengakses halaman, jika tidak, pengguna akan berada. diarahkan semula ke halaman log masuk.

2. Gunakan navigasi program Vue Router

Selain menggunakan pengawal navigasi untuk melaksanakan pengalihan, kami juga boleh menggunakan navigasi program Vue Router untuk melaksanakan fungsi pengalihan.

Penghala Vue menyediakan dua kaedah untuk melaksanakan navigasi program:

• ini.$router.push(lokasi, onComplete?, onAbort?): digunakan untuk menukar laluan, anda boleh Keep pelayar sejarah.
• ini.$router.replace(lokasi, onComplete?, onAbort?): Digunakan untuk menukar laluan dan menggantikan sejarah penyemak imbas.

Kami boleh melaksanakan pengalihan dengan memanggil kaedah tolak atau ganti dalam komponen yang perlu diubah hala.

Sebagai contoh, selepas pengguna berjaya log masuk, kita boleh mengubah halanya ke halaman utama, kodnya adalah seperti berikut:

// 用户登录成功后，进行重定向操作
this.$router.push('/home');

3 Gunakan meta digabungkan dengan navigasi terprogram

Jika kita perlu Apabila melepasi beberapa parameter semasa pengalihan, atau perlu mengira secara dinamik alamat sasaran pengalihan, anda perlu menggunakan meta digabungkan dengan navigasi program untuk mencapai ini.

Secara khusus, kami boleh menetapkan atribut meta dalam konfigurasi penghalaan untuk menyimpan beberapa parameter atau alamat sasaran yang dikira, dan kemudian mengubah hala melalui navigasi program dalam komponen.

Berikut ialah contoh kod:

// 路由配置文件
const routes = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login.vue'),
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('@/views/home.vue'),
    meta: {
      needLogin: true,
    },
  },
  {
    path: '/profile',
    name: 'profile',
    component: () => import('@/views/profile.vue'),
    meta: {
      needLogin: true,
    },
  },
  {
    path: '/redirect',
    name: 'redirect',
    component: () => import('@/views/redirect.vue'),
  },
];

// 跳转到profile页面，需要登录且传递了参数
this.$router.push({
  name: 'redirect',
  query: {
    redirectTo: 'profile',
    params: {
      username: '张三',
      age: 18,
    },
  },
});

Dalam kod di atas, kami mentakrifkan laluan ubah hala untuk menerima alamat sasaran yang diubah hala. Dalam kod bahagian hadapan, kami menghantar halaman yang perlu diubah hala sebagai parameter pertanyaan ke laluan ubah hala dengan memanggil kaedah $router.push, dan kemudian dalam komponen ubah hala, dapatkan parameter pertanyaan dan lakukan operasi ubah hala.

4. Pengawal global menggunakan Pengawal Navigasi

Penghala Vue menyediakan mekanisme pengawal global, anda boleh melakukan beberapa operasi sebelum dan selepas perubahan laluan, seperti merekodkan log akses pengguna, global. pemintasan, dsb.

Dalam pengawal global, kita boleh menggunakan kaedah seterusnya untuk melaksanakan operasi ubah hala. Contohnya, kod berikut melompat ke halaman mudah alih secara automatik apabila saiz tetingkap kurang daripada nilai tertentu:

// 全局守卫
router.beforeEach((to, from ,next) => {
  const userAgentInfo = navigator.userAgent;
  const Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
  let flag = true;
  for (let i = 0; i < Agents.length; i++) {
    if (userAgentInfo.indexOf(Agents[i]) > 0) {
      flag = false;
      break;
    }
  }
  if (flag && window.innerWidth < 768) {
    next('/mobile');
  } else {
    next();
  }
})

Dalam kod di atas, kami menentukan saiz tetingkap dan jenis peranti dalam pengawal global Jika syarat dipenuhi, gunakan kaedah seterusnya untuk melaksanakan operasi ubah hala.

Ringkasan

Artikel ini memperkenalkan pelbagai cara untuk melaksanakan pengalihan dalam aplikasi Vue, termasuk menggunakan pengawal navigasi Vue Router, navigasi program dan pengawal global, serta kaedah menghantar parameter dalam kombinasi dengan meta . Dalam pembangunan sebenar, kita boleh memilih cara yang paling sesuai untuk melaksanakan fungsi pengalihan mengikut keperluan kita.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan vue ubah hala. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!