VueJS маршрутизация не отображает компоненты - PullRequest
Новая
       20

VueJS маршрутизация не отображает компоненты

0 голосов
/ 03 августа 2020

По неизвестной причине маршрутизатор VueJS отображает только компонент root (Home) и не отображает никаких других компонентов. Консоль не показывает никаких ошибок, и я также не вижу ошибок в моем коде. 

    main.js:
    
    import Vue from 'vue'
    import VueRouter from 'vue-router';
    import App from './App.vue'
    import { routes } from './routes';
    
    Vue.use(VueRouter);
    
    const router = new VueRouter({
      routes
    });
    
    new Vue({
      el: '#app',
      router,
      render: h => h(App)
    })
    
    
    routes.js:
    
    import User from './components/user/User.vue';
    import Detail from './components/user/UserDetail.vue';
    import Home from './components/Home.vue';
    
    export const routes = [
        { path: '', component: Home },
        { path: './user', component: User },
        { path: './detail', component: Detail }
    ];
    
    
    Home.vue:
    
    
    <template>
        <div>
            <h1>The Home Page</h1>
            <hr>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab asperiores, aut autem, blanditiis consequuntur
                dolore excepturi laborum maiores minima nihil non nulla obcaecati quas quibusdam quod sed suscipit vero
                voluptatem.</p>
    
        </div>
    </template>
    
    
    User.vue:
    
    
    <template>
        <div>
            <h1>The User Page</h1>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quos incidunt corporis officiis hic aliquid voluptatem aspernatur? Odio non cum sint deleniti veritatis maxime, nihil officia dolore odit numquam harum voluptates.</p>
        </div>
    </template>
        
       
    UserDetail.vue:
    
    
       

 <template>
        <h3>Some User Details</h3>
    </template>
    
    <script>
    export default {
        created() {
            console.log('we are on details page');
        }
    }
    </script>
    
    
    
    App.vue:
    
    
    
    <template>
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                    <h1>Routing</h1>
                    <hr>
                    <router-view/>
                </div>
            </div>
        </div>
    </template>
    
    <script>
        export default {
        }
    </script>
    
    <style>
    </style>

User. vue также содержит console.log, но консоль молчит, она не запускается.

Компоненты находятся в связанном каталоге: пользователь, внутри компонентов, путь действительно правильный.

Домашняя страница отображается отлично, но никакие другие компоненты не отображаются. Так что, черт возьми, происходит?

1 Ответ

0 голосов
/ 03 августа 2020

Нашел ошибку: в файле routes. js есть точки '.' перед тропами! Вот и все.

...