uniapp 라우팅을 구성하는 방법

모바일 애플리케이션에 대한 인기와 수요가 증가함에 따라 점점 더 많은 개발자가 크로스 플랫폼 개발 기술을 사용하여 애플리케이션을 구축하기 시작했습니다. 크로스 플랫폼 개발 프레임워크인 UniApp은 이러한 추세에 따라 점차 등장했으며 점점 더 많은 개발자의 환영을 받고 있습니다. 라우팅은 UniApp으로 애플리케이션을 개발할 때 매우 중요한 구성 요소이며, 이를 통해 여러 페이지 사이를 탐색할 수 있습니다.

UniApp에서는 라우팅을 사용하여 페이지 이동 및 애플리케이션 탐색을 제어합니다. Vue.js의 라우팅 메커니즘에 이미 익숙하다면 UniApp의 라우팅을 사용해도 매우 친숙하게 느껴질 것입니다. UniApp의 라우팅 메커니즘은 Vue.js 라우팅과 잘 호환되며 몇 가지 추가 기능과 API를 제공합니다.

초보자의 경우 처음에는 유니앱 라우팅 적용이 명확하지 않을 수 있는데 유니앱 라우팅은 어디에 입력해야 할까요? 다음 글에서는 UniApp 라우팅 적용 방법과 작성 위치에 대해 자세히 소개하겠습니다.

1. 라우팅 구성 파일

UniApp에서는 라우팅 구성 파일에서 라우팅을 구성할 수 있습니다. 라우팅 구성 파일은 일반적으로 루트 디렉터리의 pages.json 파일에 위치하며 해당 기능은 애플리케이션의 라우팅 매핑 테이블을 구성하는 것입니다. 라우팅 구성 파일에서 각 페이지의 경로, 페이지 제목, 페이지 아이콘 및 기타 속성을 지정해야 합니다. 탐색 모음에 페이지를 추가해야 하는 경우 tabBar 속성. 다음은 간단한 라우팅 구성 파일의 예입니다. <code>pages.json 文件中，其作用是配置应用程序的路由映射表。在路由配置文件中，你需要指定每个页面的路径、页面的标题、页面的icon等属性，如果你需要添加页面到导航栏中，还需要指定tabBar属性。下面是一个简单的路由配置文件示例：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#ffffff"
      }
    },
    {
      "path": "pages/about/about",
      "style": {
        "navigationBarTitleText": "关于我们",
        "navigationBarBackgroundColor": "#ffffff"
      },
      "tabBar": {
        "text": "关于",
        "iconPath": "../../static/images/tabbar/about.png",
        "selectedIconPath": "../../static/images/tabbar/about-active.png"
      }
    }
  ],
  "tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#35b4b4",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "../../static/images/tabbar/home.png",
        "selectedIconPath": "../../static/images/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/about/about",
        "text": "关于",
        "iconPath": "../../static/images/tabbar/about.png",
        "selectedIconPath": "../../static/images/tabbar/about-active.png"
      }
    ]
  }
}

上面的代码中，我们定义了两个页面：index和about，并且在about页面中添加了一个tabBar属性，来指定页面在导航栏中的位置和样式。同时，我们也定义了应用程序的导航栏样式。在这个示例中，我们把index页面作为导航栏的首页，因此在tabBar属性中将其设置为了默认页面。

2. 使用UniApp路由API

除了在路由配置文件中进行路由配置之外，UniApp还提供了一整套路由API，可以在业务逻辑中灵活地使用。这些API包括uni.navigateTo、uni.redirectTo、uni.reLaunch、uni.switchTab以及uni.navigateBack等。

• uni.navigateTo

从当前页面跳转到应用程序的某个页面。如果目标页面还未打开，该API会新开一个页面；如果目标页面已经打开，该API会将目标页面置于栈顶。

uni.navigateTo({
  url: '/pages/about/about'
});

• uni.redirectTo

关闭当前页面，跳转到应用程序的某个页面。该API关闭当前页面，因此无法通过返回按钮返回到当前页面。

uni.redirectTo({
  url: '/pages/about/about'
});

• uni.reLaunch

关闭所有的页面，打开应用程序的某个页面。

uni.reLaunch({
  url: '/pages/about/about'
});

• uni.switchTab

跳转到应用程序的某个tab页面，该API只能用于跳转到应用程序的tab

uni.switchTab({
  url: '/pages/index/index'
});

위 코드에서는 index와 about, 그리고 abouttabBar 속성이 /code> 페이지에 추가되었습니다. 동시에 애플리케이션의 탐색 모음 스타일도 정의합니다. 이 예에서는 index 페이지를 탐색 모음의 홈 페이지로 사용하므로 tabBar 속성에서 기본 페이지로 설정합니다.

2. UniApp 라우팅 API 사용

라우팅 구성 파일의 라우팅 구성 외에도 UniApp은 비즈니스 로직에서 유연하게 사용할 수 있는 완전한 라우팅 API 세트도 제공합니다. 이러한 API에는 uni.navigateTo, uni.redirectTo, uni.reLaunch, uni.switchTab 및 uni.navigateBack등등.

3. uni.navigateTo

현재 페이지에서 애플리케이션의 특정 페이지로 이동합니다. 대상 페이지가 열리지 않은 경우 API는 새 페이지를 엽니다. 대상 페이지가 이미 열려 있으면 API는 대상 페이지를 스택 맨 위에 놓습니다.

uni.navigateBack({
  delta: 1  // 返回的页面数，如果为空，则返回上一个页面
});

🎜🎜uni.redirectTo🎜🎜🎜현재 페이지를 닫고 애플리케이션의 특정 페이지로 이동합니다. 이 API는 현재 페이지를 닫으므로 뒤로 버튼을 통해 현재 페이지로 돌아갈 수 있는 방법이 없습니다. 🎜rrreee🎜🎜uni.reLaunch🎜🎜🎜모든 페이지를 닫고 애플리케이션의 특정 페이지를 엽니다. 🎜rrreee🎜🎜uni.switchTab🎜🎜🎜 애플리케이션의 특정 탭 페이지로 이동합니다. 이 API는 애플리케이션의 탭 페이지로 이동하는 데에만 사용할 수 있습니다. 🎜rrreee🎜🎜uni.navigateBack🎜🎜🎜현재 페이지를 닫고 이전 페이지로 돌아갑니다. 🎜rrreee🎜🎜Summary🎜🎜🎜UniApp에서 라우팅은 애플리케이션 점프 및 탐색의 중요한 부분입니다. 애플리케이션을 개발할 때 라우팅 구성 파일과 라우팅 API를 통해 라우팅을 구성하고 사용할 수 있습니다. 라우팅 구성 파일은 페이지의 위치와 스타일을 잘 제어할 수 있는 반면, 라우팅 API는 유연한 프로그래밍 방법을 제공하여 비즈니스 로직에서 페이지를 유연하게 이동하고 탐색할 수 있도록 해줍니다. UniApp 라우팅 메커니즘을 사용하는 방법을 배우면 개발에 큰 편리함과 효율성을 가져올 수 있습니다. 🎜

위 내용은 uniapp 라우팅을 구성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!