vue가 새로운 경로를 대체합니다.

Vue가 개발됨에 따라 점점 더 많은 웹 애플리케이션이 Vue를 프런트엔드 프레임워크로 사용하도록 선택합니다. 애플리케이션이 확장되고 업데이트됨에 따라 지속적으로 새로운 경로를 추가하고 이전 경로를 교체해야 합니다. 그렇다면 Vue에서 라우팅을 대체하는 방법은 무엇입니까?

Vue에서 일반적으로 사용되는 라우팅 라이브러리는 Vue Router입니다. Vue Router는 Vue.js에서 공식적으로 제공하는 라우팅 관리자로 SPA(Single Page Application)의 라우팅 제어를 쉽게 구현할 수 있습니다. Vue Router를 사용할 때 다음 세 가지 중요한 개념을 숙지해야 합니다.

1. Router
   Router는 Vue Router 생성을 담당하는 Vue Router의 인스턴스입니다. Route를 정의할 때, 새로운 Router(options)를 사용하여 인스턴스를 생성해야 합니다. Vue에서는 일반적으로 Router 인스턴스를 router.js 파일에 별도로 작성한 다음 이를 main.js의 Vue 인스턴스에 도입하고 마운트합니다.
2. Routes
   Routes는 각 경로가 URL 경로 및 구성 요소에 해당하는 배열입니다. URL이 경로와 일치하면 해당 구성 요소가 App.vue의 태그로 렌더링됩니다. 각 Route 개체에는 경로와 구성 요소라는 두 가지 이상의 속성이 포함되어야 합니다.
3. Router-view
   Router-view는 Vue Router에서 제공하는 컴포넌트로, 일치하는 컴포넌트를 렌더링하는 데 사용됩니다. App.vue에서 일치하는 구성 요소 구성 요소를 호스팅하려면 태그를 추가해야 합니다.

다음으로 Vue Router에서 경로를 바꾸는 방법을 보여드리겠습니다. 먼저, 애플리케이션이 홈 페이지(Home), 사용자 세부 정보 페이지(UserDetail), 회사 소개 페이지(AboutUs)의 세 페이지로 구성되어 있다고 가정합니다. 이제 사용자 세부정보 페이지를 사용자 목록 페이지(UserList)로 변경하고 해당 경로를 교체해야 합니다.

첫 번째 단계에서는 router.js 파일에서 해당 경로를 수정해야 합니다.

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import UserList from '@/views/UserList.vue';
import AboutUs from '@/views/AboutUs.vue';

Vue.use(Router);

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/userList',
    name: 'userList',
    component: UserList,
  },
  {
    path: '/aboutUs',
    name: 'aboutUs',
    component: AboutUs,
  },
];

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;

여기에서는 UserDetail 구성 요소를 UserList 구성 요소로 바꾸고 해당 경로 경로를 수정합니다. 라우팅 구성을 수정한 후 수정 내용을 적용하려면 Vue 애플리케이션을 다시 시작해야 합니다.

두 번째 단계에서는 Vue 구성 요소의 라우터 링크 태그를 사용하여 라우팅 점프를 수행해야 합니다. 우리 애플리케이션에서는 사용자가 사용자 목록 페이지로 직접 이동할 수 있도록 홈페이지의 사용자 목록에 대한 링크를 추가해야 합니다.

Home.vue 페이지를 수정하고, 라우터 링크 태그를 추가하고, 해당 to 속성을 설정합니다:

<template>
  <div>
    <h1>欢迎访问我的应用</h1>
    <router-link to="/userList">用户列表</router-link>
    <router-link to="/aboutUs">关于我们</router-link>
  </div>
</template>

<script>
export default {};
</script>

여기서 to 속성을 "/userList"로 설정합니다. 이는 사용자가 사용자 목록으로 이동한다는 의미입니다. 링크를 클릭한 후 페이지.

세 번째 단계에서는 UserList.vue 구성 요소에 관련 비즈니스 로직을 추가해야 합니다. 여기서는 사용자 목록 정보가 UserList 구성 요소에 표시된다고 가정합니다.

<template>
  <div>
    <h1>用户列表</h1>
    <ul>
      <li v-for="(user, index) in userList" :key="index">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: [
        {
          name: '小明',
          age: 20,
          gender: '男',
        },
        {
          name: '小红',
          age: 21,
          gender: '女',
        },
        {
          name: '小华',
          age: 22,
          gender: '男',
        },
      ],
    };
  },
};
</script>

여기서는 v-for 지시문을 사용하여 userList의 각 사용자 개체를 li 요소로 렌더링합니다.

위 단계를 통해 사용자 세부 정보 페이지를 사용자 목록 페이지로 성공적으로 교체하고 해당 링크를 홈페이지에 추가했습니다. 실제 개발에서는 특정 비즈니스 요구에 따라 경로를 합리적으로 설계하고 교체하는 동시에 Vue Router의 관련 개념과 사용법에 주의를 기울여 애플리케이션의 정상적인 작동을 보장해야 합니다.

위 내용은 vue가 새로운 경로를 대체합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!