如何使用带Vue材质标签的Vue路线？

我正在使用Vue材质标签https://vuematerial.github.io/#/components/tabs，我想知道是否有一种方法可以通过制表符来实现Vue Router。如何使用带Vue材质标签的Vue路线？

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

举例：单击标签1具有路径“/” 单击该选项卡2具有路径“/用户”

并在浏览器，如果我去“/用户”的路线，我希望它显示用他们的路线视图激活的选项卡＃2和如果我写主路线“/”我希望它显示与他们的内容的选项卡1＃。

谢谢。

2017-04-02 Janco Boscan

我能想到的最简单的方法是将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 
     } 
    } 
}

，您可能需要调整一些的路径，以匹配路线的参数，但是这应该给你正确的路径

来源

2017-04-04 14:47:53

你会发现这是很有帮助的https://github.com/vuematerial/vue-material/issues/824 - 它显示了如何获取标签点击一个例子 –

我最近发现了如何在活动标签从路由动态生成md选项卡。

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

来源

2018-01-29 05:07:02

我知道它已经回答了，但有一个简单的解决这个，我今天发现。可能会帮助别人。

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

参考Here

来源

2018-02-21 16:42:15

如何使用带Vue材质标签的Vue路线？

回答

相关问题