Vue路由器无法加载组件

Posted 2023-02-23

【中文标题】Vue路由器无法加载组件

【英文标题】：Vue router can't loading component

【发布时间】：2019-05-25 18:24:13

【问题描述】：

main.js：

import Vue from 'vue';
import App from './App';
import router from './routes/Route';
Vue.config.productionTip = false;
new Vue(
  el: '#app',
  render: h => h(App),
  router
)

Route.js：

import Vue from "vue";
import VueRouter from "vue-router";
import Routes from "./Routes";
Vue.use(VueRouter);
export default new VueRouter(
  mode: 'history',
  Routes
);

Routes.js：

import About from '../components/About';
import Work from '../components/Work';
import Contact from '../components/Contact';
export default [
    
      path: '/about',
      name: 'about',
      component: About
    
]

菜单.vue：

<template>
    <div class="menu-top">
        <router-link class="menu-href-route" to="/about"><span>About</span></router-link>
    </div>
</template>
<script>
export default 
    name: 'Menu',

</script>

你好.vue：

<template>
    <div class="hello">
        <router-view></router-view>
    </div>
</template>
<script>
import About from './About';
    export default 
        name: "Hello"
    
</script>

关于.vue：

<template>
    <div>
        About test text
    </div>
</template>

<script>
    export default 
        name: "about"
    
</script>

我在文件 Route.js 中创建路由并将他导出到 main.js。接下来在文件 Routes.js 中创建组件路径。在文件 Menu.js 中是路由器链接。并且文件 Hello.vue 具有路由器视图。 About.vue 是视图组件。当我有地址时，我不知道为什么组件 About.vue 没有加载到文件 Hello.vue 中：http://localhost:8080/about。我重新安装了 node 和 vue-router，但这没有帮助。

【问题讨论】：

我认为你应该通过 "components: "about":about"- 属性将 about 组件注册到 hello 组件中。

【参考方案1】：

由于 js 是区分大小写的，所以尝试像这样进行更改

import Vue from "vue";
import VueRouter from "vue-router";
import Routes from "./Routes";
Vue.use(VueRouter);
export default new VueRouter(
  mode: 'history',
  routes: Routes
);

【讨论】：

是的，我应该使用属性routes: Routes。感谢您的帮助；）