Vue 소재 탭을 사용하여 Vue Routes를 사용하는 방법은 무엇입니까?

Question

나는 Vue Material Tabs https://vuematerial.github.io/#/components/tabs을 사용하고 있는데 Vue Router를 탭으로 구현하는 방법이 있는지 알고 싶습니다.

명명 된보기를 사용하면 모든 탭에 다른 라우터보기를 표시 할 수 있지만 모든 활성 탭에서 다른 경로를 얻는 방법을 알고 싶습니다.

예 : 표 1은 경로를 가지고 클릭 "/" 탭 2 경로 "/ 사용자"나는 "/ 사용자"에 가면

그리고 브라우저에서

경로 내가 원하는있다 클릭 경로보기로 활성화 된 Tab # 2를 보여주고 기본 경로 "/"를 쓰면 내용이 Tab 1 #으로 표시됩니다.

감사합니다.

Answer 1

가장 쉬운 방법은 md-active을 경로의 경로 매개 변수에 바인딩하는 것입니다.

<md-tab id="movies" md-label="Movies" :md-active="isPath('/movies')"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p> 
</md-tab> 
<md-tab id="books" md-label="Books" :md-active="isPath('/books')"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p> 
</md-tab> 

구성 요소 :

export default { 
    methods: { 
     function isPath (path) { 
      return this.$route.path === path 
     } 
    } 
} 

당신이 경로의 매개 변수와 일치하는 경로의 일부를 조정할해야 할 수도 있지만 내가 최근에 어떻게 발견

Answer 2

올바른 경로에 당신을 활성 탭을 주어야한다 경로에서 md-tab을 동적으로 생성합니다.

라우터 /하는 index.js :

routes: [ 
{ path: '*', redirect: '/home' }, 
{ 
    path: '/home', 
    component: Home, 
    icon: 'move_to_inbox' 
}, ... ] 

메뉴 구성 요소 :

<md-tabs v-if="type === 'tabs'" class="md-primary"> 
    <md-tab v-for="route in $router.options.routes" :key="route.path" v-if="route.path != '*'" :to="route.path" :md-label="uCaseFirst(route.path.slice(1))"></md-tab> 
</md-tabs> 

<md-list v-if="type === 'menu'"> 
    <md-list-item v-for="route in $router.options.routes" :key="route.path" v-if="route.path != '*'" :to="route.path"> 
    <md-icon>{{route.icon}}</md-icon> 
    <span class="md-list-item-text">{{uCaseFirst(route.path.slice(1))}}</span> 
    </md-list-item> 
</md-list> 


... 
props: ['type'], 
methods: { 
    uCaseFirst(s) { 
    return s.charAt(0).toUpperCase() + s.slice(1) 
} } 

Answer 3

는 나는 이미 대답 알고 있지만 오늘 발견되는이에 똑바로 앞으로 솔루션이있다. 다른 사람을 도울 수 있습니다.

md-sync-route 속성은 <md-tabs> 태그와 함께 사용할 수 있으며 현재 활성 탭을 경로와 동기화 된 상태로 유지해야합니다.

참조하면 찾을 수 있습니다 Here