Question

由于未知原因，VueJS路由器仅显示根组件（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，但是控制台保持沉默，无法运行。

组件位于链接目录中：用户，在组件内部，路径确实正确。

主页显示完美，但没有其他组件显示。那么到底发生了什么？

Answer 1

我发现了这个错误：在route.js文件中有点“。”。在路径之前！就是这样。

VueJS路由不显示组件

1 个答案: