【问题标题】:How to run Vuetify.js toolbar title with router如何使用路由器运行 Vuetify.js 工具栏标题
【发布时间】:2018-08-09 13:09:07
【问题描述】:

我正在使用 vuetify.js。 我想应用程序标题链接到顶部菜单。 但是在 /route shop 和 /discount 中,HogeHoge 按钮更改了切换状态。 有没有办法收集这个?

<v-toolbar app>
  <v-toolbar-title class="mr-5">
    <v-btn flat to="/">HogeHoge</v-btn>
  </v-toolbar-title>
  <v-toolbar-items class="hidden-sm-and-down">
    <v-btn flat to="/shop">shop</v-btn>
    <v-btn flat to="/discount">discount</v-btn>
  </v-toolbar-items>
</v-toolbar>

【问题讨论】:

    标签: javascript vue.js toolbar vuetify.js


    【解决方案1】:

    这是我解决它的方法。我遵循了 vuetify 和 vue-router 官方文档的混合。

    <v-toolbar-title style="cursor: pointer">
        <router-link v-slot="{navigate}" :to="{ name:'Home' }" custom>
          <span role="link" @click="navigate" @keypress.enter="navigate">
            Home
          </span>
        </router-link>
      </v-toolbar-title>
    

    在这个答案中强调一些事情很重要:

    1. 的 tag 属性已弃用,并已在 Vue Router 4 中删除。使用 v-slot API 删除此警告:https://next.router.vuejs.org/guide/migration/#removal-of-event-and-tag-props-in-router-link
    2. 使用 span 而不是 nothing 可以消除格式问题。
    3. 这也会从 vue-router 中删除关于 NavigationDuplicated 的警告。

    【讨论】:

      【解决方案2】:

      只需编辑 v-toolbar-title 标记以包含以下内容:

      <v-toolbar-title style="cursor: pointer" @click="$router.push('/')" >
      

      【讨论】:

      • 简单,就是这样。谢谢!
      • 完美!这让我不必重写链接样式
      【解决方案3】:
      <router-link to="/home" tag="div" class="v-toolbar__title">Home</router-link>
      

      你可以用任何元素来做到这一点。只需要知道应该使用哪个 vuetify 类名。
      如果你不知道它是什么类名,首先尝试实现普通元素,这将是一个路由器链接。

      <v-toolbar-title>Title</v-toolbar-title>
      

      打开您的开发工具浏览器并复制类名(以及标签)。
      现在您可以使用路由器链接来解决问题了。

      【讨论】:

        【解决方案4】:

        您可以通过简单地将其包装在 router-link 中来做到这一点。

        <v-toolbar app clipped-left>
            <router-link to="/page1">
              <v-toolbar-title>
                ? Title
              </v-toolbar-title>
           </router-link>
        </v-toolbar>
        

        Nuxt js 你可以这样做:

        <nuxt-link to="/page1">
            <v-toolbar-title>
                ? Title
            </v-toolbar-title>
        </nuxt-link>
        

        【讨论】:

          【解决方案5】:

          我可以自己解决这个问题。 对根路由进行活动类记录。

          https://github.com/vuetifyjs/vuetify/issues/1947

          【讨论】:

            【解决方案6】:

            您可以添加 exact 作为道具,如:

            <v-btn flat to="/shop" exact>shop</v-btn>
            <v-btn flat to="/discount" exact>discount</v-btn>
            

            【讨论】:

              猜你喜欢
              • 2023-03-21
              • 2016-09-25
              • 1970-01-01
              • 2017-09-22
              • 2019-08-06
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多