Question

在尝试路由到新页面时遇到问题，我想在单击“ HEREEEEEEEEEEEEE”按钮时路由到passe.js，但是它不起作用！注意pass.vue位于“ components”文件夹中

<template>
  <div>
    <h1>{{ price }}</h1>
  </div>
</template>

<script>
import gql from "graphql-tag";
export default {
  data() {
    return {
      price: ""
    }
  },
  apollo: {
    price: gql`
      query price {
        dish(id: 1) {
          price
        }
      }
    `
  }
};
</script>

这是我手动创建的router.js，因为即使安装了vue-router，也找不到它。

<template>
    <v-app>
        <div>
            <v-toolbar dark prominent src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg">

                <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
                <v-toolbar-title>Workers</v-toolbar-title>

            </v-toolbar>


            <div class="container d-flex flex-column">
                <v-container>
                    <v-row align="end" justify="end">
                        <v-btn x-large color="red">START</v-btn>>
                    </v-row>
                </v-container>
            </div>


            <v-navigation-drawer app v-model="drawer" class="primary" absolute bottom temporary>
                <v-list nav dense>
                    <v-list-item-group v-model="group" active-class="deep-purple--text text--accent-4">
                        <v-list-item :to=" 
        {name:'C:/Users/ykemi/OneDrive/Bureau/thermo/api/interface/th/src/components/pass.vue'}">
                            <v-list-item-icon>
                                <v-icon>mdi-account</v-icon>
                                <router-view />
                            </v-list-item-icon>
                            <v-list-item-title>HEREEEEEEEEEEEEEEEEEEEEE</v-list-item-title>
                        </v-list-item>
                        .
                        .

                    </v-list-item-group>
                </v-list>
            </v-navigation-drawer>

        </div>
    </v-app>
</template>


and followed by :

<script>
    export default {
        data: () => ({
          drawer: false,
          group: null,
          theme:{
            primary:'#9652ff',
           }

        }),

        watch: {
          group () {
            this.drawer = false
          },
        },
      }
</script>

Answer 1

在您为元素分配事件侦听器之前，Vue无法检测到它。在此处了解有关事件的更多信息：https://vuejs.org/v2/guide/events.html

要指示vue-router转到下一页，可以使用router-link或router.push(href)。在此处了解有关使用vue-router导航的更多信息：https://router.vuejs.org/guide/essentials/navigation.html

对于您来说，您想在$router.push事件发生时执行click函数。

这是您的代码：

<v-list-item-title @click="$router.push('/pass')"> ... </v-list-item-title>

希望有帮助

尝试转到新页面时出现问题

1 个答案: