Vue Router+Vuetify不显示该命令

Question

我正在尝试用Vue Router加载一个组件，除了加载所需的URL之外，它不会改变显示的内容。如果我手动访问URL路径，它会正确显示组件。我也在使用Laravel，因此，我在web.php上插入了以下行，以便Vue路由器可以负责处理路由。

Route::get('/{any}', 'SinglePageController@index')->where('any', '.*');

注意这里的错误(IMGUR-Gif(：

App.js

import './bootstrap';
import Vue from 'vue';
import Vuetify from 'vuetify';
import axios from 'axios';
import VueCookie from 'vue-cookie';
import router from '@/js/routes.js';
import App from '@/js/views/App';
Vue.use(Vuetify);
Vue.use(VueCookie);
const app = new Vue({
el: '#app',
router,
render: h => h(App)
});
export default app;

---

routes.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '@/js/views/Home';
import About from '@/js/views/About';
import Exames from '@/js/views/Exames/Exames';
import checkAuthentication from '@/js/utils/check-authentication.js';
import getStaffData from '@/js/utils/get-staff-data.js';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/exames',
name: 'exames',
component: Exames
}
]
});
//router.beforeEach(checkAuthentication);
//router.beforeEach(getStaffData);
export default router;

---

主页.vue

<template>
<div>
<h1>Página de Início</h1>
</div>
</template>

---

检查.vue

<template>
<div>
<v-layout d-flex align-start justify-start row fill-height>
<v-flex xs6 sm6>
<v-card>
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">Kangaroo Valley Safari</h3>
<div>Located two hours south of Sydney in the <br>Southern Highlands of New South Wales, ...</div>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat color="orange">Share</v-btn>
<v-btn flat color="orange">Explore</v-btn>
</v-card-actions>
</v-card>
</v-flex>
<v-flex xs6 sm6>
<v-card>
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">Kangaroo Valley Safari</h3>
<div>Located two hours south of Sydney in the <br>Southern Highlands of New South Wales, ...</div>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat color="orange">Share</v-btn>
<v-btn flat color="orange">Explore</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</div>
</template>
<script>
export default {
props: ['membro'],
data() {
return {
name: 'exames'
}
}
}
</script>

---

Answer 1

您必须在路由器视图中加载组件，这样当路由更改时，组件就会在该路由器视图组件中加载。

你可以看看这个代码笔看看如何做到这一点。注意Line 22中的<router-view></router-view>