Bagaimana untuk membuat sub-laluan sekunder dipaparkan secara lalai dalam vue

Vue.js ialah salah satu rangka kerja bahagian hadapan yang lebih popular pada masa ini Ia mempunyai komponen yang kaya dan mekanisme penghalaan, membolehkan kami membangunkan aplikasi satu halaman yang kompleks dengan cepat. Antaranya, mekanisme penghalaan adalah bahagian penting Vue.js Ia memetakan kepada komponen yang sepadan melalui alamat URL dan menyokong penghalaan bersarang. Dalam artikel ini, kami akan meneroka cara membuat sub-laluan sekunder dipaparkan secara lalai dalam Vue.js.

1. Gunakan vue-router untuk mengkonfigurasi penghalaan

Dalam Vue.js, sangat mudah untuk menggunakan vue-router untuk mengkonfigurasi penghalaan. Kami mula-mula mencipta projek asas Vue.js dan memasang vue-router:

npm install vue-router --save

Dalam fail main.js, import vue-router dan daftar:

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

Vue.config.productionTip = false

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

Dalam Dalam router.js, kami boleh mengkonfigurasi penghalaan:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
import User from './views/User.vue'
import Profile from './views/Profile.vue'
import Setting from './views/Setting.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/user',
      name: 'user',
      component: User,
      children: [
        {
          path: '',
          name: 'profile',
          component: Profile
        },
        {
          path: 'setting',
          name: 'setting',
          component: Setting
        }
      ]
    }
  ]
})

Dalam konfigurasi penghalaan di atas, kami mengkonfigurasi dua sub-laluan di bawah laluan /user: /user dan /user/setting, yang sepadan dengan Profil masing-masing . dan Komponen tetapan.

2. Tetapkan paparan lalai sub-laluan sekunder

Kami mendapati bahawa apabila kami mengakses laluan /user, hanya komponen Profil akan dipaparkan dan komponen /user/setting tidak akan dipaparkan secara lalai. Jika kita mahu komponen /pengguna/tetapan dipaparkan secara lalai, bagaimanakah kita harus menyediakannya?

Kami boleh menggunakan Vue.js dalam pengawal laluan laluan untuk memantau perubahan laluan dan menentukan sama ada laluan itu sah, ubah hala URL.

Dalam fail router.js, kami boleh menambah pengawal laluan:

export default new Router({
  // ...其他配置
  routes: [
    // ...其他路由配置
  ]
})

router.beforeEach((to, from, next) => {
  // 判断是否进入 /user 路径
  if (to.path === '/user') {
    // 将路径重定向为 /user/setting
    next({path: '/user/setting'})
  } else {
    // 不需要进入 /user 路径
    next()
  }
})

Dalam kod di atas, kami menggunakan kaedah router.beforeEach() untuk mendaftarkan pengawal laluan global, dalam laluan Memintas apabila perubahan berlaku. Mula-mula, kami menentukan sama ada laluan penghalaan semasa ialah /user Jika ya, ubah hala URL ke /user/setting, jika tidak pergi terus ke langkah penghalaan seterusnya.

Dengan cara ini, kami telah mencapai kesan memaparkan sub-laluan peringkat kedua secara lalai.

Ringkasan

Tetapkan sub-laluan peringkat kedua untuk dipaparkan secara lalai dalam Vue.js Anda boleh memantau perubahan laluan dan mengubah hala laluan dalam pengawal laluan. Dengan cara ini, apabila pengguna mengakses laluan tertentu, komponen yang sepadan boleh dipaparkan secara automatik untuk meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimana untuk membuat sub-laluan sekunder dipaparkan secara lalai dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!