Vue 라우팅 공식 문서 연구 노트

Vue 라우팅 공식 문서 연구 노트

Vue는 단일 페이지 애플리케이션(SPA)을 보다 편리하고 빠르게 구축하는 데 도움이 되는 사용하기 쉬운 진보적 JavaScript 프레임워크입니다. 그 중 Vue Router는 Vue에서 매우 중요한 구성 요소로, 주로 전체 애플리케이션의 라우팅을 관리하는 데 사용됩니다. 이 기사에서는 Vue 라우팅 공식 문서의 연구 노트를 소개합니다.

1. Vue Router 시작하기

먼저 npm 또는 Yarn을 통해 Vue Router를 설치해야 합니다.

npm install vue-router

yarn add vue-router

그런 다음 main.js에 Vue Router를 소개하고 마운트합니다.

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

그 중에서 Vue를 전달합니다. use() 메소드는 Vue Router를 Vue에 등록한 다음 새로운 VueRouter 인스턴스를 생성하고 라우팅 규칙을 설정합니다. 마지막으로 VueRouter 인스턴스를 Vue 인스턴스에 마운트합니다.

다음으로 라우팅 규칙에 해당하는 구성 요소를 설정해야 합니다. 예:

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

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

위 코드에서는 Home 및 About 구성 요소를 도입하여 라우팅 규칙에 사용했습니다. 루트 경로에 액세스하면 Home 구성 요소가 렌더링되고, /about 경로에 액세스하면 About 구성 요소가 렌더링됩니다.

2. 루트 점프

Vue Router를 사용하는 과정에서 루트 점프를 수행해야 하는 경우가 종종 있습니다. Vue Router는 다음과 같이 경로 점프를 구현하는 다양한 방법을 제공합니다.

1. $route 개체를 통해

다음과 같이 구성 요소의 $route 개체를 통해 경로 점프를 구현할 수 있습니다.

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

2. Route.linkActive 클래스 구현

페이지에서 현재 선택된 경로에 특정 스타일을 추가해야 할 경우 $route.linkActive 클래스를 사용할 수 있습니다. 예:

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

위 코드에서 현재 경로가 지정된 경로와 일치하면 활성 스타일이 경로 요소에 추가됩니다.

3. 프로그래밍 방식 탐색을 통한 구현

어떤 경우에는 양식이 제출된 후 지정된 페이지로 점프하는 등 JavaScript 코드에서 라우팅 점프를 수행해야 합니다. 이때 프로그래밍 방식 탐색을 사용하여 라우팅 점프를 구현할 수 있습니다. 예:

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

3. 라우팅 구성요소에서 매개변수 전달

실제 개발에서는 일부 매개변수를 한 라우팅 구성요소에서 다른 라우팅 구성요소로 전달해야 하는 경우가 많습니다. Vue Router는 다음과 같이 라우팅 구성 요소에서 매개 변수를 전달하는 다양한 방법을 제공합니다.

1. $route 개체를 통해 구현됨

라우팅 구성 요소에서 라우팅 매개 변수를 가져와야 하는 경우 $route.params 개체를 사용할 수 있습니다.

// 定义路由规则
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. 쿼리 매개변수를 통해 구현됨

쿼리 매개변수는 매개변수를 URL 뒤에 직접 연결하여 전달할 수 있습니다. 예:

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

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

4.

Vue 라우터는 다양한 라우팅 후크 기능을 제공하여 라우팅 변경 시 다양한 작업을 수행하는 데 도움이 될 수 있습니다. 예를 들어 구성 요소에 들어가기 전에 사용자 로그인 상태를 확인하거나 변경 내용을 라우팅할 때 페이지 점프를 수행할 수 있습니다.

1. 글로벌 라우팅 후크 기능

전체 애플리케이션에서 라우팅 변경이 발생하면 글로벌 라우팅 후크 기능이 실행됩니다. 예:

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

위 코드에서는 router.beforeEach( ) 메소드 Pre-guard, 사용자의 로그인 여부를 확인하는 데 사용됩니다. 로그인되어 있지 않은 경우 로그인 페이지로 이동합니다. 일부 통계 또는 기타 작업은 전역 포스트 후크에서 수행될 수 있습니다.

2. 구성 요소 내 라우팅 후크 기능

Vue Router는 전역 라우팅 후크 기능 외에도 beforeRouteEnter, beforeRouteLeave 및 beforeRouteUpdate와 같은 구성 요소 내에서 일부 라우팅 후크 기능을 제공합니다. 예를 들어 beforeRouteEnter 후크 함수에서 구성 요소 인스턴스를 가져오고 다음과 같은 일부 초기화 작업을 수행할 수 있습니다.

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

위 코드에서는 구성 요소가 경로에 들어갈 때와 비동기 데이터를 가져온 후 beforeRouteEnter 후크 함수를 트리거했습니다. , 데이터를 구성 요소의 데이터에 저장하고 next() 메서드를 통해 점프 라우팅을 계속합니다.

요약:

이 글에서는 Vue Router 시작하기, 라우팅 점프, 라우팅 구성요소 전달 매개변수 및 라우팅 후크 기능 등을 포함하여 Vue Router 공식 문서의 연구 노트를 주로 소개합니다. Vue 개발에 Vue Router를 사용하는 모든 분들에게 도움이 되길 바랍니다.

위 내용은 Vue 라우팅 공식 문서 연구 노트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!