如何使用路由器将 v-list-item 链接到组件？答案

【问题标题】：How to link a v-list-item to a component using the router?如何使用路由器将 v-list-item 链接到组件？
【发布时间】：2020-06-17 06:03:39
【问题描述】：

我正在使用 Vuetify，但我似乎无法解决这个问题。我的<v-navigation-drawer> 中有一个<v-list>，看起来像这样：

SideDash.vue 组件

<template>
    <v-navigation-drawer
        v-model="drawer" clipped
        :mini-variant.sync='mini'
        width=240 absolute permanent
    >
        <v-list
            flat dense nav class="py-1"
        >
            <v-list-item-group color='primary' mandatory>
                <v-list-item
                    v-for="item in items"
                    :key="item.title"
                    dense
                    router :to="item.route"
                >
                    <v-list-item-icon>
                        <v-icon>{{ item.icon }}</v-icon>
                    </v-list-item-icon>
                    <v-list-item-content>
                        <v-list-title>{{ item.title }}</v-list-title>
                    </v-list-item-content>

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


<script>
export default {
    data() {
        return {
            drawer: true,
            items: [
                {icon: 'mdi-speedometer', title:'Dashboard', route:'/dashboard'},
                {icon: 'mdi-tools', title:'Tools', route:'/tools'}
            ],
        }
        
    }
    
}
</script>

路由器/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Dashboard from '@/views/Dashboard.vue'
import Tools from '@/views/Tools.vue'


Vue.use(VueRouter)

const routes = [
  {
    path: '/dashboard',
    name: 'dashboard',
    component: Dashboard
  },
  {
    path: '/tools',
    name: 'tools',
    component: Tools
  }
]

const router = new VueRouter({
  mode: 'history',
  routes: routes
})

export default router

App.vue

<template>
  <v-app>
    <nav>
      <Navbar/>
    </nav>
    
    <v-content>
      <SideDash/>
    </v-content>
    
  </v-app>
</template>

<script>
import Navbar from './components/Navbar';
import SideDash from './components/SideDash'

export default {
  name: 'App',

  components: {
    Navbar,
    SideDash
  },

  data: () => ({

  }),
};
</script>

这相当简单，直到我将道具:to="item.route" 添加到我的v-list-item 之前它运行良好。这使我的清单完全消失了。我最终得到了一个没有任何内容的导航抽屉，我不知道为什么。我在这里想念什么？感谢您的帮助

PS：这可能会有所帮助，但是当我在 App.vue 的 <v-content></v-content> 中添加 <router-view></router-view> 时，我得到一个空白页面，甚至没有我的导航栏或导航抽屉。我觉得它可能来自我的路由器设置。我签入了我的 package.json 并拥有它

"vue-router": "^3.1.3"

编辑

好吧，我发现了错误……这很愚蠢。在文件 main.js 中，import router from './router' 被注释为 router 在 new Vue(...) 中。我保留了此处显示的代码并且它有效。

【问题讨论】：

标签： vue.js vuetify.js vue-router

【解决方案1】：

关于为什么:to 方法会起作用，而@click 方法不起作用的任何建议？

作品

<v-list-item 
   :to="item.route"
   v-else
   :key="i"
   link
>

没有

  <v-list-item 
    @click="$router({path: item.route})"
    v-else
    :key="i"
    link
  >

【讨论】：

确实，我发现@click 不起作用。我尝试将道具 router 添加到您的 v-list-item 中，但又没有帮助。我也很想知道为什么它不起作用
$router({path: item.route}) 对我不起作用。我不得不把它改成$router.push({path: item.route})

【解决方案2】：

终于，我搞定了。

<v-list-item :key="i" link @click="$router.push({ path: item.route })">
  <v-list-item-action>
    <v-icon>{{ item.icon }}</v-icon>
  </v-list-item-action>
  <v-list-item-content>
    <v-list-item-title class="grey--text">
      {{ item.text }}
    </v-list-item-title>
  </v-list-item-content>
</v-list-item>

来源：https://router.vuejs.org/guide/essentials/navigation.html

他们说：“点击<router-link :to="..."> 相当于调用router.push(...)。”

已编辑：如果您不想看到"Error: Avoided redundant navigation to current location: "/about".，请使用@click="$router.push({ path: item.route }).catch(err => {})

来源：NavigationDuplicated Navigating to current location ("/search") is not allowed [vuejs]

【讨论】：

【解决方案3】：

上面的代码看起来是正确的，需要在 v-list 项目点击事件中给出一个小修复 @click="$router({path: item.route})"

items: [
                {icon: 'mdi-speedometer', title:'Dashboard', route:'/dashboard'},
                {icon: 'mdi-tools', title:'Tools', route:'/tools'}
            ],


<template>
    <v-navigation-drawer
        v-model="drawer" clipped
        :mini-variant.sync='mini'
        width=240 absolute permanent
    >
        <v-list
            flat dense nav class="py-1"
        >
            <v-list-item-group color='primary' mandatory>
                <v-list-item
                    v-for="item in items"
                    :key="item.title"
                    dense
                    @click="$router({path: item.route})"
                >
                    <v-list-item-icon>
                        <v-icon>{{ item.icon }}</v-icon>
                    </v-list-item-icon>
                    <v-list-item-content>
                        <v-list-title>{{ item.title }}</v-list-title>
                    </v-list-item-content>

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

【讨论】：

谢谢！它让我的名单再次出现！我如何测试路由是否有效？当我点击一个列表项时，url 没有改变，另外，当我在 App.vue 的 v-content 中添加 <router-view></router-view> 以检查它是否显示所需的页面时，我仍然得到一个空白页面。
我已经对答案进行了更改，您不需要从路线中删除 '/' 它应该是项目：[ {icon: 'mdi-speedometer', title:'Dashboard' , route:'/dashboard'}, {icon: 'mdi-tools', title:'Tools', route:'/tools'} ], 它将按预期工作。请让我知道这是否有效
我尝试过使用“/”，结果相同。我检查了开发工具的控制台，我收到了错误'route is undefined'。所有这些错误最终都可能来自我的路由器？
@click="$router({path: item.route})"和:to="item.route"有什么区别
@Half_Duplex，当您使用 @click="$router({path: item.route})" 事件处理程序时，它只是将按钮显示为 html 并单击事件以编程方式导航到不同的页面来自 vue-router lib 的 this.$router 的帮助。但是当你使用 :to="item.route" 时，它会创建一个超链接标签，当用户点击时，它会导航到不同的页面。如果还有问题请告诉我

【解决方案4】：

只是一点旁注。如果你使用

{icon: 'mdi-speedometer', title:'Dashboard', route:'/dashboard'},

在抽屉里，你会遇到一个错误，例如想放索引路径的可选部分

...
  {
    path: '/:extra?',
    name: 'Index',
    component: Index,
  },
...

链接将不再起作用，因为您只使用“链接”而不是真正的路由器。（路由器链接仍然有效）。

最好使用以下语法：

{icon: 'mdi-speedometer', title:'Dashboard', route:({name: 'dashboard'})},

这样你使用来自 vuejs 的路由器，你不会收到任何“直接”链接的问题。

【讨论】：