如何通过单击 Vuetify 中的按钮转到新路线？

Question

我是 Vuetify 的初学者，我正在开发我的第一个应用程序，我的问题是： 如何通过单击导航栏列表中的“HEREEEEEEEEEEEEEEEEEE”按钮，程序将路由到名为 pass.vue 的文件（位于同一文件夹中）？

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



<v-navigation-drawer app 
v-model="drawer" 
 class="deep-purple accent-4"
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>
                    <v-list-item-icon>
                    <v-icon>mdi-account</v-icon>
                    <router-view/>
                    </v-list-item-icon>
                    <v-list-item-title router:to="/pass.vue">HEREEEEEEEEEEEEEEEEE</v-list-item-title>
                </v-list-item>

                <v-list-item >
                    <v-list-item-icon>
                    <v-icon>mdi-help</v-icon>
                    </v-list-item-icon>
                    <v-list-item-title>Help</v-list-item-title>
                </v-list-item>

                <v-list-item >
                    <v-list-item-icon>
                    <v-icon>mdi-alarm</v-icon>
                    </v-list-item-icon>
                    <v-list-item-title>Timetable</v-list-item-title>
                </v-list-item>



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

</div>
</template>

谢谢！

Answer 1

1. 我认为您将 Vue 与纯 HTML 混淆了。对于 Vue，您需要使用 Vue-Router 库来创建路由。
2. 对于 Vuetify 组件或任何一般组件，请记住 :to 创建一个可点击的链接，因此您希望将其放在您希望用户点击的顶级组件中。 <v-list-item> 而不是 v-list-item-title

现在，对于您的特定情况，您的模板应该如下所示：

<v-list-item v-for="(item,index) in items" :key="index" :to="{name: item.link}">
  <v-list-item-content>
    <v-list-item-title>
      {{ item.text }}
    </v-list-item-title>
  </v-list-item-content>
</v-list-item>

接着是：

...
data(){
 return{
  items:{
  text: 'HEREEEEEEEEEEEEEEEEE',
  link: 'pass' // this will be a named router link
 }
}
...

现在在您的路由器的单独文件中，如果您使用 vue-cli（推荐）添加该文件，将创建并调用 router.js，添加以下内容

        {
            path: '/pass',
            name: 'pass', // same as passed in component
            component: () => import('@/path/to/file/pass.vue')
        }

现在，这个，一开始可能会让人不知所措，但实际上很容易。我建议您在返回之前结帐Vue-Router's Documentation。

Answer 2

您可以在 v-list-item 中使用 :to 代替项目标题，并且名称必须与您的路线中定义的相同。

        <v-list-item :to="{name:'pass'}">
          <v-list-item-title>HEREEEEEEEEEEEEEEEEE</v-list-item-title>
        </v-list-item>

Answer 3

我是这样做的，注意我在v-list-item上使用:to而不是v-list-item-title。

<v-list-item v-for="item in items" :key="item.text" :to="item.link">
  <v-list-item-action>
    <v-icon>{{ item.icon }}</v-icon>
  </v-list-item-action>
  <v-list-item-content>
    <v-list-item-title>
      {{ item.text }}
    </v-list-item-title>
  </v-list-item-content>
</v-list-item>

item.link 的示例

// url
:to="/profile"

// path of Location obj
:to="{ path: '/profile' }"

// a more detail Location obj
:to="{ name: 'profile2', params: { userId: 123 }}"

您可以将字符串 url 传递给 :to 或 Location。确保您已在路由器中声明此路由，如下所示：

const routes = [
  {
    path: '/profile',
    name: 'profile',
    component: Profile
  },
  {
    path: '/profile2/:userId',
    name: 'profile2',
    component: Profile2
  }
];