vue 3 vue-router 의 전체 절차 기록 사용

머리말
대부분의 단일 페이지 응용 프로그램 에 있어 서 관리 루트 는 없어 서 는 안 될 기능 이다.새로운 버 전의 Vue Router 가 알파 단계 에 있 음 에 따라 다음 버 전의 Vue 에서 어떻게 작 동 하 는 지 볼 수 있 습 니 다.
Vue 3 의 많은 변경 사항 은 플러그 인과 라 이브 러 리 에 접근 하 는 방식 을 약간 바 꿀 것 입 니 다.그 중에서 Vue Router 를 포함 합 니 다.
1.첫 번 째 단계:vue-router 설치

npm install [email protected]

두 번 째 단계:main.js
먼저 vue 2 와 vue 3 의 main.js 의 차 이 를 비교 해 보 세 요.(첫 번 째 는 vue 2,두 번 째 는 vue 3)

우리 가 vue 2 에서 자주 사용 하 는 Vue 대상 을 뚜렷하게 볼 수 있 습 니 다.vue 3 에서 createApp 방법 을 직접 사용 하여'사라 짐'되 었 지만 실제로 createApp 방법 으로 만 든 app 은 Vue 대상 입 니 다.vue 2 에서 자주 사용 하 는 Vue.use()는 vue 3 에서 app.use()로 바 꾸 어 정상적으로 사용 할 수 있 습 니 다.vue 3 의 mian.js 파일 에서 vue-router 를 사용 하여 app.use()방법 으로 router 를 직접 호출 하면 됩 니 다.
주:import 루트 파일 내 보 내기 루트 이름 from"대응 루트 파일 상대 경로",프로젝트 디 렉 터 리 는 다음 과 같 습 니 다(vue 2 와 vue 3 가 같 음).

3.경로 파일

import { createRouter, createWebHashHistory } from "vue-router"

const routes = [
    {
        path: '/',
        component: () => import('@/pages')             
    },
    {
        path: '/test1',
        name: "test1",
        component: () => import('@/pages/test1')   
    },
    {
        path: '/test2',
        name: "test2",
        component: () => import('@/pages/test2')   
    },
]
export const router = createRouter({
  history: createWebHashHistory(),
  routes: routes
})

export default router

app.vue

<template>
  <router-view></router-view>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

4.사용(예 를 들 어 점프)
우 리 는 루트 를 사용 해 야 하 는 곳 에 useRoute 와 useRouter 를 도입 합 니 다.(vue 2 의$route 와$router 에 해당 합 니 다.)

<script>
import { useRoute, useRouter } from 'vue-router'
export default {
  setup () {
    const route = useRoute()
    const router = useRouter()
    return {}
  },
}

페이지 이동

<template>
  <h1>  test1</h1>
  <button @click="toTest2">toTest2</button>
</template>
<script>
import { useRouter } from 'vue-router'
export default {
  setup () {
    const router = useRouter()
    const toTest2= (() => {
      router.push("./test2")
    })
    return {
      toTest2
    }
  },
}
</script>
<style  scoped>
</style>

총결산
vue 3 사용 vue-router 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 3 사용 vue-router 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 바 랍 니 다!