路径的Vue路由配置“组件”：/不能是字符串ID

Posted 2023-02-23

【中文标题】路径的Vue路由配置“组件”：/不能是字符串ID

【英文标题】：Vue route config "component" for path: / cannot be a string id

【发布时间】：2018-04-19 14:20:05

【问题描述】：

我正在学习 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>

组件 :: Home.vue

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

 
 </script>

【问题讨论】：

不要对路由中的组件使用字符串：例如：不是component : 'home',，而是component: homePage,

或者直接在组件后面使用require：component: require('./components/Home.vue') 但你需要名字

谢谢，我也用过。

有效吗？？

是的，但在其他一些机会之后。然后得到我期望的结果。

【参考方案1】：

这样配置路由文件

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>

【参考方案2】：

你需要改变你的 const 路由器，如下所述：

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

【参考方案3】：

我在 app.js 文件中编写了磨损代码 旧代码是

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

正确的代码是

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

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

组件：require('home', './components/Home.vue')