Question

我正在学习 Vue Js - v2.5.3 。

我正在使用组件和路线概念进行开发项目。其中组件正在工作，但当我尝试定义路由然后获取错误

Uncaught Error  ::  route config component for path: /signin cannot be a string id.
Use an actual component instead.

或

 Uncaught Error  ::  route config component for path: / cannot be a string id.
Use an actual component instead.

我无法理解出了什么问题。请帮我。当我运行 npm run dev 然后vue编译完成但在浏览器控制台上出错。

我的代码在App.js上

window.Vue = require('vue');
import VueRouter from 'vue-router';
 Vue.use(VueRouter);

 const homePage =   Vue.component('home', require('./components/Home.vue'));
 const example_comp =    Vue.component('example', require('./components/Example.vue'));
 const registration =   Vue.component('signin', require('./components/Signin.vue'));

  const router = new VueRouter({
routes: [
    {
        path : '/',
        // name : 'home',
        component : 'home',
    },
    {
        path : '/signin',
        // name : 'signin',
        component : 'signin',
    },
    {
        path : '/example',
        // name : 'example',
        component : 'example',
    }
]
});

const app = new Vue({
el: '#app',
router: router,
});

Home.blade.php

    <div id="app">
    <p > <router-link to="/usersSignIn">User Regitration </router-link></p>
    <p ><router-link to="/login"> Login  </router-link></p>


    <router-view></router-view>

</div>

Component :: Home.vue

 <template>
 <div>
    <p> This home page.</p>
 </div>
 </template>
 <script>
 export default {

 }
 </script>

Answer 1

您需要按如下所述更改const路由器：

const router = new VueRouter({
routes: [
    {
        path : '/',
        // name : 'home',
        component : homePage,
    },
    {
        path : '/signin',
        // name : 'signin',
        component : registration,
    },
    {
        path : '/example',
        // name : 'example',
        component : example_comp,
    }
]
});

Answer 2

这样配置路由文件

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);


const router = new VueRouter({
    routes: [
        { path: '/', component: require('./components/HomeComponent.vue').default },
        { path: '/about', component: require('./components/AboutComponent.vue').default },
    ]
})

new Vue({
    router
}).$mount('#app')

下一步，将以下行添加到视图中以显示路线

<router-view></router-view>

Answer 3

我在app.js文件中编写了worng代码 旧代码

 const app = new Vue({
 el: '#app',
router = router,
 });

正确的代码是

    const app = new Vue({
    el: '#app',
    router : router,
    });

所以在那之后我没有检查并运行npm run dev .... 我做的第二个改变与组件

组件：require（＆＃39; home＆＃39;，＆＃39; ./ components / Home.vue＆＃39;）

Vue route config＆＃34; component＆＃34; for path：/不能是字符串id

3 个答案: