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

Question

我希望在单击 “开始” 按钮（位于 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（我想在点击 “开始” 按钮时显示的文件):

<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

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

Vuetify routing: changing page content conundrum

router

vue.js

vue-router

vuetify.js