Vue penghalaan nota kajian dokumen rasmi

Nota kajian dokumen rasmi penghalaan Vue

Vue ialah rangka kerja JavaScript progresif yang mudah digunakan yang boleh membantu kami membina aplikasi satu halaman (SPA) dengan lebih mudah dan cepat. Antaranya, Penghala Vue ialah komponen yang sangat penting dalam Vue, terutamanya digunakan untuk menguruskan penghalaan keseluruhan aplikasi. Artikel ini akan memperkenalkan nota kajian dokumentasi rasmi penghalaan Vue.

1. Bermula dengan Vue Router

Pertama, kita perlu memasang Vue Router melalui npm atau yarn:

npm install vue-router

yarn add vue-router

Kemudian, kami memperkenalkan Vue Router dalam main.js dan tambahkannya Pemasangan:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [{
    path: '/',
    component: Home
  }]
})

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

Antaranya, kami mendaftarkan Penghala Vue ke dalam Vue melalui kaedah Vue.use(), kemudian mencipta contoh VueRouter baharu dan menetapkan peraturan penghalaan. Pada akhirnya, kami memasang contoh VueRouter ke tika Vue.

Seterusnya, kita perlu menetapkan komponen yang sepadan untuk peraturan penghalaan, contohnya:

import Home from './views/Home.vue'
import About from './views/About.vue'

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

Dalam kod di atas, kami memperkenalkan komponen Laman Utama dan Perihal dan menggunakannya dalam peraturan penghalaan . Apabila laluan akar diakses, komponen Laman Utama diberikan dan apabila laluan /about diakses, komponen Perihal diberikan.

2. Lompat laluan

Dalam proses menggunakan Vue Router, kita selalunya perlu melakukan lompatan laluan. Vue Router menyediakan pelbagai cara untuk melaksanakan lompatan laluan, seperti:

1 Melalui objek $route

Kita boleh melaksanakan lompatan laluan melalui objek $route dalam komponen, contohnya. :

this.$router.push('/about')

2. Dilaksanakan melalui kelas $route.linkActive

Apabila kita perlu menambah gaya tertentu pada laluan yang sedang dipilih pada halaman, kita boleh menggunakan kelas $route.linkActive. Contohnya:

<router-link to="/" tag="li" active-class="active">Home</router-link>
<router-link to="/about" tag="li" active-class="active">About</router-link>

Dalam kod di atas, apabila laluan semasa sepadan dengan laluan yang ditentukan, gaya aktif akan ditambahkan pada elemen laluan.

3. Pelaksanaan melalui navigasi terprogram

Dalam beberapa kes, kita perlu melakukan lompatan penghalaan dalam kod JavaScript, seperti melompat ke halaman yang ditentukan selepas borang diserahkan. Pada masa ini, navigasi program boleh digunakan untuk melaksanakan lompatan penghalaan, contohnya:

// 使用命名路由跳转
this.$router.push({ name: 'about' })
  
// 使用路由参数跳转
this.$router.push({ path: '/user/123' })

3. Melepasi parameter daripada komponen penghalaan

Dalam pembangunan sebenar, kita sering perlu memindahkan beberapa parameter daripada komponen penghalaan Dilalui kepada komponen penghalaan yang lain. Vue Router menyediakan pelbagai cara untuk menghantar parameter dalam komponen penghalaan, contohnya:

1 Dilaksanakan melalui objek $route

Apabila kita perlu mendapatkan parameter penghalaan dalam komponen penghalaan, kita boleh menggunakan. Objek $ route.params, contohnya:

// 定义路由规则
const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
})

// 在组件中获取路由参数
export default {
  methods: {
    goToUser(id) {
      // 参数传递方式1
      this.$router.push('/user/' + id)
      
      // 参数传递方式2
      this.$router.push({ path: '/user/' + id })
      
      // 参数传递方式3
      this.$router.push({ name: 'user', params: { id }})
    }
  }
}

// User组件中获取路由参数
export default {
  created() {
    const id = this.$route.params.id
  }
}

2 Dilaksanakan melalui parameter pertanyaan

parameter pertanyaan ialah kaedah yang lebih fleksibel untuk menghantar parameter secara langsung Contohnya:

this.$router.push({
  path: '/user',
  query: { id: 123 }
})

// User组件中获取query参数
export default {
  created() {
    const id = this.$route.query.id
  }
}

4. Fungsi cangkuk penghalaan

Penghala Vue menyediakan pelbagai fungsi cangkuk penghalaan yang boleh membantu kami melakukan operasi yang berbeza apabila penghalaan berubah. Sebagai contoh, kita boleh menyemak status log masuk pengguna sebelum memasuki komponen, atau melakukan lompatan halaman apabila perubahan laluan.

1. Fungsi cangkuk penghalaan global

Fungsi cangkuk penghalaan global akan dicetuskan apabila penghalaan berubah dalam keseluruhan aplikasi, contohnya:

const router = new VueRouter({
  routes: [...],
})

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 判断用户是否登录
  if (to.meta.requireAuth && !store.state.isUserLogin) {
    next({ path: '/login' })
  } else {
    next()
  }
})

// 全局后置钩子
router.afterEach((to, from) => {
  // 页面跳转统计
  statistics(to.path)
})

Dalam kod di atas, Kami tentukan pengawal hadapan global melalui kaedah router.beforeEach() untuk menentukan sama ada pengguna dilog masuk. Jika tidak, lompat ke halaman log masuk. Sesetengah statistik atau operasi lain boleh dilakukan dalam cangkuk jawatan global.

2. Fungsi cangkuk penghalaan dalam komponen

Selain fungsi cangkuk penghalaan global, Penghala Vue juga menyediakan beberapa fungsi cangkuk penghalaan dalam komponen, seperti beforeRouteEnter, beforeRouteLeave dan beforeRouteUpdate. Sebagai contoh, kita boleh mendapatkan contoh komponen dalam fungsi cangkuk beforeRouteEnter dan melakukan beberapa operasi pemula, seperti:

export default {
  beforeRouteEnter(to, from, next) {
    // 获取组件实例
    const vm = this
    
    // 发起异步请求
    getAsyncData().then(response => {
      // 将数据保存到组件的data中
      vm.data = response.data
      
      // 继续路由跳转
      next()
    })
  }
}

Dalam kod di atas, kami mencetuskan fungsi cangkuk beforeRouteEnter apabila komponen memasuki laluan, dan selepas mendapatkan data tak segerak Simpan data ke data komponen dan teruskan penghalaan melalui kaedah seterusnya().

Ringkasan:

Artikel ini terutamanya memperkenalkan nota kajian dokumentasi rasmi Vue Router, termasuk bermula dengan Vue Router, lompatan penghalaan, parameter lulus komponen penghalaan dan fungsi cangkuk penghalaan, dsb. Saya harap ia akan membantu semua orang untuk menggunakan Penghala Vue dalam pembangunan Vue.

Atas ialah kandungan terperinci Vue penghalaan nota kajian dokumen rasmi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!