vue.js - 如何将 Vue 路由与 Vue 材质选项卡一起使用？

Question

我正在使用 Vue Material Tabs https://vuematerial.github.io/#/components/tabs，我想知道是否有办法使用标签实现 Vue Router。

使用命名视图我可以在每个选项卡中显示不同的路由器视图，但我想知道如何在每个活动选项卡中获取不同的路由。

示例：
单击选项卡 1 有路由“/”
单击选项卡 2 有路由“/user”

在浏览器中，如果我转到“/user”路线，我希望它显示用他们的路线视图激活的 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-sync-route是要走的路

这是一个例子：

 <md-tabs md-sync-route>
    <md-tab id="tab-home" md-label="Home" md-icon="home" to="/">
      <router-view></router-view>
    </md-tab>
    <md-tab id="tab-teams" md-label="Teams" to="/teams" class="md-primary">
      <router-view></router-view>
    </md-tab>
 </md-tabs>

在路由器/index.js 中：

routes: [
   {path: "/", component: Home},
   {path: "/teams", component: Teams}
]

Answer 3

我最近发现了如何从路由动态生成 md-tabs。

路由器/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 4

我知道它已经得到了回答，但是我今天找到了一个直接的解决方案。也许它会帮助别人。

md-sync-route属性可以与<md-tabs>标签一起使用，这将使当前活动选项卡与路由保持同步。

参考这里

Answer 5

我遇到了同样的问题并以这种方式解决了-

我@click="$router.push('/');"在开始<md-tab .... > 标签中使用

<md-tabs class="md-transparent" md-alignment="fixed">
  <md-tab 
    id="tab-home" 
    md-label="Posts" 
    @click="$router.push('/')"
  >
  </md-tab>
  <md-tab
    id="tab-pages"
    md-label="Category"
    @click="$router.push('/category')"
  >
  </md-tab>
</md-tabs>