Vuetify 路由：更改页面内容难题

Question

我希望在单击 “Let's GO” 按钮（位于 App.vue 中）后查看 uwc.vue 的内容。 但是，url 改变了，屏幕的内容仍然保持不变。

我是 vue 新手，我向 Vuetify 社区提出了这个问题，但被忽略了。

提前谢谢你。

router.js：

import Vue from 'vue';
import Router from 'vue-router';
import uwc from '../views/uwc';

Vue.use(Router);

export default new Router({
    mode: 'history',
    routes: [
        { path: '/', name: 'uwc', component: uwc},
    ]
});

App.vue

<template>
    <v-app>
        <v-container fluid>
            <v-col class="d-flex mx-auto" >
                <!-- UWC Card -->
                <v-card class="mx-auto my-15" max-width="400" >
                    <v-img height="400px" class="image-fit" src="./img/UWC-logo.webp" ></v-img>
                    <v-divider class="mx-4"></v-divider>
                    <v-card-title>
                        <p class="text-break">
                            University of the Western Cape
                        </p>
                    </v-card-title>                
                    <v-card-actions>
                        <router-link to="/views/uwc">
                            Let's GO
                        </router-link>
                    </v-card-actions> 
                </v-card>
            </v-col>
        </v-container>
    </v-app>
</template>

<script>
    export default {
        name: 'app',
    }
</script>

uwc.vue（我想在点击“Let's GO”按钮时显示的文件）：

<template>
    <v-app  id="inspire">
        <router-view></router-view>
        <v-container fluid>
            <v-row>
                <template v-for="n in 4">
                    <v-col :key="n" class="mt-2" cols="12">
                        <strong> Category {{ n }} </strong>
                    </v-col>
                    <v-col v-for="j in 6" :key="`${n}${j}`" cols="6"  md="2">
                        <v-sheet height="150"></v-sheet>
                    </v-col>
                </template>
            </v-row>
        </v-container>
    </v-app>
</template>

Answer 1

首先，这不是一个“Vuetify”问题。这是 VueJS 的一般路由问题。

您的主要问题是您的 App.vue 文件中没有<router-view/>。这就是在您的路由器中呈现路径的原因。

App.vue

<template>
  <div>
    <router-view/>    
  </div>
</template>

现在如果您访问“/”路径，您将看到 uwc.vue 文件的内容。

我还想指出另一个错误。

您的<router-link></router-link> 标签指的是路由器文件中的path，而不是文件路径位于您的文件夹结构中。

你有：

<router-link to="views/uwc">

应该是：

<router-link to="/">

如果您还在苦苦挣扎，请使用 [Vue CLI][1] 创建一个全新的应用程序。

然后使用vue add router 添加路由器。它将为您提供一个非常可靠的示例来处理您的应用程序。 [1]：https://cli.vuejs.org/guide/creating-a-project.html#vue-create