相关疑难解决方法(0)

我正在使用Vue与vue-router.对于列表视图中的产品项,我想生成JSON-LN注释,其url属性设置为产品详细信息视图的路径.

我知道我可以通过使用获得当前路线的路径,this.$route.path但有没有办法获得一个不同的路径路径,因为它将呈现

<router-link :to={name: 'ProductDetail', params: {id: some_id, slug: some_slug}}></router-link>

在其他地方注入路线的路径？

我想将vuetify选项卡组件简单地用作导航控件

 <v-tabs dark fixed icons centered>
    <v-tabs-bar class="cyan">
      <v-tabs-slider color="yellow"></v-tabs-slider>
      <v-tabs-item router :to="{name: 'election/admin', id: this.$route.params['id']}">
        Overview
      </v-tabs-item>
    </v-tabs-bar>

  </v-tabs>

但是,似乎没有工作.我认为该to属性除了router应该工作取代href？

版本和环境

验证：1.0.13

视图：2.5.13

浏览器：Chrome 67.0.3396.48

操作系统：Windows 10

重现问题的步骤

1. 创建一个包含路由器链接的导航抽屉。

2. 在其中一个链接中创建一个 v-tab 组件，显示每个选项卡的路由器视图。

预期行为

在导航抽屉中的一个链接中，我有一个连接到路由器视图的链接，其中一个链接<v-tab>连接到另一个路由器视图。你能帮我么？

实际行为

选项卡的路由器视图不显示

复制链接：

https://codepen.io/aabbrrm234/pen/deQjEe

<v-app id="inspire">
        <v-navigation-drawer fixed :clipped="true" app v-model="drawer">
            <v-list dense>
                <template v-for="item in items">
                    <v-layout
                    row
                    v-if="item.heading"
                    align-center
                    :key="item.heading"
                    >
                    <v-flex xs6>
                        <v-subheader v-if="item.heading">
                            {{ item.heading }}
                        </v-subheader>
                    </v-flex>
                    <v-flex xs6 class="text-xs-center">
                        <a href="#!" class="body-2 black--text">EDIT</a>
                    </v-flex>
                </v-layout>
                <v-list-group
                v-else-if="item.children"
                v-model="item.model"
                :key="item.text"
                :prepend-icon="item.model ? item.icon : item['icon-alt']"
                append-icon=""
                >
                <v-list-tile slot="activator">
                    <v-list-tile-content>
                        <v-list-tile-title>
                            {{ item.text }}
                        </v-list-tile-title>
                    </v-list-tile-content>
                </v-list-tile>
                <v-list-tile
                v-for="(child, …

我有这样的标签...

<v-tabs v-model="tab" v-on:change="tabbed()" fixed-tabs>
  <v-tab ripple>Tab A</v-tab>
  <v-tab ripple>Tab B</v-tab>
  <v-tab ripple>Tab C</v-tab>
  
  // tab items, etc

我想要 URL 路径来确定选项卡，并且想要通过选项卡更改来更改路径。我无法使用路径执行此操作（因为我是新的），但我认为我可以通过查询来近似我想要的内容，例如/mypath?tab=2

  data: () => ({
    tab: null
  }),
  methods: {
    tabbed () {
      console.log(`we tabbed, now tab is ${this.tab} and route is ${JSON.stringify(this.$route.path)}`)
      this.$router.replace({ path: this.$route.path, query: { tab: this.tab } })
    }
  },
  created () {
    console.log(`tab is ${this.$route.query.tab}`)
    this.tab = this.$route.query.tab
  }

我认为这可以解决问题：在创建时，从查询中获取选项卡并设置选项卡模型。在选项卡更改时，从选项卡模型获取选项卡并设置查询。但是，当我导航到/mypath?tab=2、 或任何选项卡时，我最终会到达第 0 个选项卡并获得如下控制台输出：

选项卡为 2

我们使用选项卡，现在选项卡为 0，路线为“/mypath”

有关安装的某些操作会将选项卡更改回零？

我可以通过路由来实现这一点吗？这样我就可以转到"/mypath/tab-a" 我至少可以通过查询来实现这一点吗？看起来我的代码是正确的，但我不明白为什么它无法工作