小编zen*_*hac的帖子

如何将VueComponent传递给$ vuetify.goTo()方法?

我有3个名为home,about&work的视图组件。在App.vue文件中

<v-app>
    <ToolBar />
    <v-content>
      <router-view name="home"></router-view>
      <router-view name="about"></router-view>
      <router-view> </router-view>
    </v-content>
</v-app>
Run Code Online (Sandbox Code Playgroud)

router.js文件包含此文件。

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      components: {
        home: Home,
        about: About
      }
    },
    {
      path: '/work',
      name: 'work',
      component: () => import('./views/work/Work.vue')
    }
  ]
})
Run Code Online (Sandbox Code Playgroud)

在About.vue文件中

<template>
    <div id="about">
        <v-container>
            ....
        </v-container>
    </div>
</template>
Run Code Online (Sandbox Code Playgroud)

并在ToolBar.vue文件中

<v-btn @click="$vuetify.goTo('#about', options)">About</v-btn>
Run Code Online (Sandbox Code Playgroud)

假设我在“ /”路线(路径)中,并且单击了工具栏中的“关于”按钮。然后,按预期向下滚动到About组件。我要在路线“ / work”上单击“关于”按钮,转到主页“ /”,然后向下滚动到“关于”部分,以执行此操作。

在vuetify文档中说goTo(target: string | number | HTMLElement | VueComponent, options?: object) => void

我的第一个问题是如何将Vue组件作为参数传递给goTo方法目标参数?

第二个问题是,这是否是实现我想要的行为的最佳方法?如果没有,如何得到我期望的结果?

“英语不是我的母语,请为清楚起见进行编辑,然后删除此评论!”

vue.js vuetify.js

2
推荐指数
1
解决办法
2518
查看次数

标签 统计

vue.js ×1

vuetify.js ×1