element-ui 내 비게 이 션 바 를 사용 하여 경로 전환 방법 에 대한 상세 한 설명

최근 에 vue 를 처음 배 웠 는데 작은 프로젝트 를 만들어 문법 과 사상 을 익 혀 보 았 습 니 다.그 중에서 elemen-ui 의 네 비게 이 션 바 를 이용 하여 경로 전환 페이지 를 만 들 었 습 니 다.다음은 학습 과정 을 기록 하 겠 습 니 다.
element-ui 도입 vue 프로젝트 의 용법 참고요소 홈 페이지
먼저 홈 페이지 의 예 를 복사 하고,이 를 바탕 으로 우리 가 원 하 는 모습 으로 수정한다.

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
 <el-menu-item index="1">    </el-menu-item>
 <el-submenu index="2">
 <template slot="title">     </template>
 <el-menu-item index="2-1">  1</el-menu-item>
 <el-menu-item index="2-2">  2</el-menu-item>
 <el-menu-item index="2-3">  3</el-menu-item>
 <el-submenu index="2-4">
  <template slot="title">  4</template>
  <el-menu-item index="2-4-1">  1</el-menu-item>
  <el-menu-item index="2-4-2">  2</el-menu-item>
  <el-menu-item index="2-4-3">  3</el-menu-item>
 </el-submenu>
 </el-submenu>
 <el-menu-item index="3" disabled>    </el-menu-item>
 <el-menu-item index="4"><a href="https://www.ele.me" rel="external nofollow" target="_blank">    </a></el-menu-item>
</el-menu>

<script>
 export default {
 data() {
  return {
  activeIndex: '1'
  };
 },
 methods: {
  handleSelect(key, keyPath) {
  console.log(key, keyPath);
  }
 }
 }
</script>

속성:
*default-active:현재 active 메뉴 항목 의 번 호 를 표시 합 니 다.
*index:형식 은 문자열 입 니 다.모든 el-menu-item 구성 요소 에 하나의 번호 가 있 습 니 다.default-active 에 표 시 됩 니 다.
메뉴 표시 줄 로 이동:

<el-menu :default-active="this.$router.path" router mode="horizontal">
 <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
  {{ item.navItem }}
 </el-menu-item>
</el-menu>

데이터:

data() {
  return {
  navList:[
   {name:'/findProject',navItem:'    '},
   {name:'/communityActivity',navItem:'    '},
   {name:'/publishProject',navItem:'    '},
   {name:'/personalCenter',navItem:'    '},
   {name:'/manageCenter',navItem:'     '},
  ]
  }
 }

경로:

export default new Router({
 routes: [{
  path: '*',
  redirect: '/findProject'
 }, {
  path: '/findProject',
  name: 'findProject',
  component: findProject
 }, {
  path: '/communityActivity',
  name: 'communityActivity',
  component: communityActivity
 }, {
  path: '/publishProject',
  name: 'publishProject',
  component: publishProject
 }, {
  path: '/personalCenter',
  name: 'personalCenter',
  component: personalCenter
 }, {
  path: '/manageCenter',
  name: 'manageCenter',
  component: manageCenter
 }]
})

메뉴 표시 줄 을 사용 하여 경로 이동 에 몇 가지 주의 점 이 있 습 니 다.
1.엘 메 누 에 라 우 터 추가
2.index 는 경로 의 path 를 연결 해 야 합 니 다.위의 예 를 참고 하 세 요.'/'는 빠 질 수 없습니다.
3.default-active 는 현재 경로(this.$router.path)로 설정 합 니 다.경로 가 변 할 때 해당 하 는 menu-item 이 밝 아 집 니 다.
확장 지식:vue 프로젝트 의 경로 설정 방법
회사 의 프로젝트 는 vue 비 계 를 사용 하여 구축 하 는데 배경 관리 시스템 에 속한다.기능 페이지 가 비교적 많 으 면 vue 루트 를 사용 하여 점프 한다.

개인 적 으로 위 에 있 는 방식 으로 경로 파일 을 배치 하고 게 으 른 로 딩 모드 로 설정 하 는 것 이 습관 입 니 다.다음 과 같 습 니 다.

import Vue from 'vue'
import Router from 'vue-router'
//import Login from '.././views/login.vue'
//import NotFound from '.././views/404.vue'
//import Home from '.././views/index.vue'
Vue.use(Router)

export default new Router({
 mode: 'history',//  # 
 routes: [
 {
  path: '/login',
  name: 'Login',
  component: resolve => require(['../views/login.vue'],resolve)
 },
 {
  path: '/404',
  name: 'NotFound',
  component: resolve => require(['../views/404.vue'],resolve)
 },
 {
  path: '/',
  redirect: '/default'
 },
 {
  path: '/',
  name: 'Home',
  component: resolve => require(['../views/index.vue'],resolve),
  meta: {title: '    '},
  children:[
  {
   path: '/default',
   component: resolve => require(['../components/default.vue'],resolve),
   meta: {title: '    '}
  },
  {
   path: '/set',
   component: resolve => require(['../components/set.vue'],resolve),
   meta: {title: '  '}
  },
  {
   path: '/user',
   component: resolve => require(['../components/user.vue'],resolve),
   meta: {title: '    '}
  },
  {
   path: '/member',
   component: resolve => require(['../components/memberList/memberList.vue'],resolve),
   meta: {title: '    '}
  },
  {
   path: '/baseCharts',
   component: resolve => require(['../components/charts/baseCharts.vue'],resolve),
   meta: {title: '    '}
  }
  ]
 }
 ]
})

main.js 에서 경로 설정:

이렇게 하면 필요 한 곳 에서 길 을 사용 할 수 있다.
이상 의 element-ui 는 네 비게 이 션 바 를 이용 하여 길 을 뛰 어 넘 는 용법 에 대한 상세 한 설명 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.