vue에서 기본적으로 보조 하위 경로를 표시하는 방법

Vue.js는 현재 가장 인기 있는 프런트 엔드 프레임워크 중 하나입니다. 풍부한 구성 요소와 라우팅 메커니즘을 갖추고 있어 복잡한 단일 페이지 애플리케이션을 빠르게 개발할 수 있습니다. 그 중 라우팅 메커니즘은 Vue.js의 중요한 부분으로, URL 주소를 통해 해당 구성 요소에 매핑되고 중첩 라우팅을 지원합니다. 이 기사에서는 Vue.js에서 기본적으로 보조 하위 경로를 표시하는 방법을 살펴보겠습니다.

1. vue-router를 사용하여 라우팅 구성

Vue.js에서는 vue-router를 사용하여 라우팅을 구성하는 것이 매우 간단합니다. 먼저 기본 Vue.js 프로젝트를 생성하고 vue-router를 설치합니다:

npm install vue-router --save

main.js 파일에서 vue-router를 가져오고 등록합니다:

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')

router.js 파일에서 라우팅을 구성할 수 있습니다:

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

위의 라우팅 구성에서는 /user 경로 아래에 두 개의 하위 경로인 /user 및 /user/setting을 구성했습니다. 이는 각각 프로필 및 설정 구성 요소에 해당합니다.

2. 보조 하위 경로의 기본 표시 설정

/user 경로에 액세스하면 Profile 구성 요소만 표시되고 /user/setting 구성 요소는 기본적으로 표시되지 않는 것으로 나타났습니다. /user/setting 구성 요소가 기본적으로 표시되도록 하려면 어떻게 설정해야 합니까?

경로의 경로 가드에서 Vue.js를 사용하여 경로 변경을 모니터링하고 경로가 합법적인지 판단할 수 있습니다. URL을 리디렉션하세요.

router.js 파일에서 경로 가드를 추가할 수 있습니다:

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

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

위 코드에서는 router.beforeEach() 메서드를 사용하여 경로 변경 시 차단할 전역 경로 가드를 등록합니다. 먼저 현재 라우팅 경로가 /user인지 확인합니다. 그렇다면 URL을 /user/setting으로 리디렉션하고, 그렇지 않으면 다음 라우팅 단계로 바로 이동합니다.

이런 방식으로 기본적으로 보조 하위 경로를 표시하는 효과를 얻었습니다.

Summary

Vue.js에서 기본적으로 표시되도록 보조 하위 경로를 설정하세요. 경로 변경 사항을 모니터링하고 경로 가드에서 경로를 리디렉션할 수 있습니다. 이러한 방식으로 사용자가 특정 경로에 액세스하면 해당 구성 요소가 자동으로 표시되어 사용자 경험을 향상시킬 수 있습니다.

위 내용은 vue에서 기본적으로 보조 하위 경로를 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!