logo标签列表

VueJS路由器无法加载组件

vue.jsvue-componentvue-router
5

我正在使用VueJS Router，但路由器没有加载组件。

我有About.vue和Contact.vue只是用标签来测试 - 如下所示：

<template>
  <div>
    <h1>Contact page. Welcome baby!</h1>
  </div>
</template>

这是带有三个路由链接和路由视图的App.vue。

<template>
   <div>
     <h1>Routing</h1>
     <router-link to="/">Home</router-link>
     <router-link to="/about">About</router-link>
     <router-link to="/contact">Contact</router-link>
     <router-view></router-view>
  </div>
</template>

这是main.js文件（导入文件的路径正确）

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import {routers} from './router'

Vue.use(VueRouter);

let router = new VueRouter({mode: 'history', routers});

new Vue({
    el:'#app',
    router,
    components: {
      'app-home' : App
    }
});

这是路由器的JS文件。router.js（路径正确）

import About from './About.vue'
import Contact from './Contact.vue'
import Home from './App.vue'

export const routers=[
    {
      path: '/' , component: Home
    },
    {
      path:'/about',component:About
    },
    {
      path:'/contact',component:Contact
    }
]

这是index.html文件。

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="utf-8">
    <title>router</title>
 </head>
 <body>
    <div id="app">
       <app-home></app-home>
    </div>
  <script src="/dist/build.js"></script>
 </body>
</html>

当我加载页面时，主页面看起来如下所示： Loaded Main page 当我点击每个导航时，除了URL之外，主页没有任何变化。URL变成：
http://localhost:8080/contact
http://localhost:8080/about
但是没有加载我导入的组件。
如果您需要更多信息以提供建议，请随时问我。 如果您对此问题有任何线索，请在此分享，我们将不胜感激。
谢谢。
3个回答
13

您需要传递给对象键VueRouter的参数名为routes，但您却传递了routers。

尝试这样做...

let router = new VueRouter({mode: 'history', routes: routers});

你也可以将你的"routers"变量重命名为"routes"。例如：

export const routes=[

和

import {routes} from './router'
// snip
let router = new VueRouter({mode: 'history', routes });
1
在我的情况下，我不得不创建一个新的Vue项目 (vue create Project)，选择 "手动选择特性"；然后我不得不标记 "Router"。
之前，我使用默认值创建了一个项目，并单独安装了路由器 (npm install vue-router)，但最终路由器没有加载组件。
附：我使用：
  • npm 6.14.6
  • nodejs v12.18.3
  • @vue/cli 4.5.4
0

我遇到了与OP相同的症状，但是我使用的是Netlify和Gridsome（它使用Vue.js）。在我的情况下，原因是一个标记不正确的联系表单。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接