Question

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

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

实施例：单击选项卡1具有路由＆＃34; /＆＃34; 单击选项卡2具有路径＆＃34; / user＆＃34;

如果我转到＆＃34; / user＆＃34;在浏览器中路线我希望它显示用他们的路线视图激活的标签＃2，如果我写主路线＆＃34; /＆＃34;我希望它显示标签1＃及其内容。

感谢。

Answer 1

我能想到的最简单方法是将$row["content"]绑定到路径的路径参数。

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>

您可能需要调整一些路径以匹配路由的参数，但这应该会为您提供正确路径上的活动标签

Answer 2

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

router / 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

Answer 4

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>

在router / index.js中：

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

如何在Vue材料选项卡中使用Vue Routes？

4 个答案: