이 글은 탭 페이지를 구현하기 위한 vue-router 관련 방법을 주로 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.
vue-router는 Vue.js의 공식 라우팅 플러그인으로, 탭 애플리케이션 구축에 적합합니다. Vue의 탭 애플리케이션은 라우팅 및 구성 요소를 기반으로 합니다. 라우팅은 액세스 경로를 설정하고 vue-router가 각 구성 요소를 올바른 위치에 렌더링하는 데 사용됩니다.
우선, .vue의 콘텐츠는 매우 간단합니다. b988a8fd72e5e0e42afffd18f951b277는 레이블을 생성하고 경로를 지정하며, 975b587bf85a482ea10b0a28848e78a4는 경로와 일치하는 구성 요소를 렌더링합니다.
<template> <p id="account"> <p class="tab"> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/account/course">我的课程</router-link> <!-- 注意这里的路径，course和order是account的子路由 --> <router-link to="/account/order">我的订单</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </p> </template>
구조는 매우 간단합니다. 계정 페이지에는 코스와 주문이라는 두 개의 탭 페이지도 포함되어 있습니다.
경로를 작성할 때 페이지 간의 계층 관계에 주의해야 합니다. 처음에는 다음과 같이 썼습니다.
import Vue from 'vue'
import Router from 'vue-router'
import Account from ...
import CourseList from ...
import OrderList from ...
Vue.use(Router)
export default new Router({
routes: [
{
path: '/account',
name: 'account',
component: Account
},
{
path: '/my-course',
name: 'course',
component: CourseList
},
{
path: '/my-order',
name: 'order',
component: OrderList
}
]
})이렇게 하면 3185c25c2d1fbc70f8035edf568b89ec를 클릭하면 975b587bf85a482ea10b0a28848e78a4에 구성 요소를 표시하는 대신 새 페이지를 만듭니다.
올바른 경로는 다음과 같이 작성되어야 합니다.
routes: [
{
path: '/account',
name: 'account',
component: Account,
children: [
{name: 'course', path: 'course', component: CourseList},
{name: 'order', path: 'order', component: OrderList}
]
}
] 루트 경로 계정을 등록하고
저는 이제 막 Vue 작업을 시작했습니다. 이 문제가 오랫동안 저를 괴롭혀 왔기 때문에 여기에 기록하겠습니다.
vue.js 구성 요소에 대한 튜토리얼을 보려면 특별 vue.js 구성 요소 학습 튜토리얼과 Vue.js 프런트엔드 구성 요소 학습 튜토리얼을 클릭하여 학습하세요.
관련 권장 사항:
js와 jquery가 탭 탭 페이지 기능을 각각 구현하는 방법
위 내용은 vue-router는 탭 탭 페이지를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!