Vue.js 如何将Vue管线与Vue材质选项卡一起使用？

我正在使用Vue材质选项卡，我想知道是否有一种方法可以使用选项卡实现Vue路由器

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

例如： 单击选项卡1，该选项卡显示路线“/” 单击选项卡2上的“路由”/“用户”

在浏览器中，如果我转到“/user”路线，我希望它显示与路线视图一起激活的选项卡2，如果我写入主路线“/”我希望它显示带内容的选项卡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>

---

您可能需要调整一些路径以匹配路由的参数，但这将为您提供正确路径上的活动选项卡

我最近发现了如何从路由动态生成md选项卡

路由器/index.js：

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

菜单组件：

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

<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)
} }

{{route.icon}
{{uCaseFirst（route.path.slice（1））}
...
道具：['type']，
方法：{
尤卡塞第一(s){
返回s.charAt（0）.toUpperCase（）+s.slice（1）
} }

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

---

md sync route

属性可与

标记一起使用，这将保持当前活动选项卡与路由同步

---

Ref

md同步路由

是一种方法

以下是一个例子：

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

---

您可能会发现这很有帮助-它显示了一个如何获取选项卡单击的示例此代码的问题是，如果我转到

/

路线，则

主页

组件将加载到主页和团队的两个选项卡中。

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