如何在 Vue Material 选项卡中使用 Vue 路由？

Question

我正在使用 Vue Material 选项卡 https://vuematerial.github.io/#/components/tabs 我想知道是否有一种方法可以使用选项卡实现 Vue Router。

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

示例：
点击 Tab 1 有路由“/”
点击 Tab 2 有路由“/user”

在浏览器中，如果我转到“/user”路线，我希望它显示使用他们的路线视图激活的选项卡#2，如果我写主路线“/”，我希望它显示选项卡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-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}
]

Answer 5

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

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

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

如何在 Vue Material 选项卡中使用 Vue 路由？

How to use Vue Routes with Vue Material Tabs?

vue.js

vuejs2

vue-router

vue-material