VueJS 路由器不加载组件
Posted
技术标签:
【中文标题】VueJS 路由器不加载组件【英文标题】:VueJS Router doesn't load the component 【发布时间】:2018-02-10 02:06:01 【问题描述】:我正在使用 VueJS 路由器,但路由器没有加载组件。
我有 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>
当我加载页面时,主页面如下所示:
当我单击每个导航时,除了 URL 之外,主页没有任何变化。 网址变成
http://localhost:8080/联系方式
http://localhost:8080/about
但没有加载我导入的组件。
如果您需要更多信息来提供建议,请随时询问。 如果您对这个问题有任何线索,如果您在这里分享,我将不胜感激。
谢谢。
【问题讨论】:
【参考方案1】:就我而言,我必须使用"Manually select features"
创建一个新的 Vue 项目 (vue create Project
);然后我必须标记"Router"
。
之前我使用默认值创建了一个项目,并且我已经单独安装了路由器 (npm install vue-router
) - 但最后路由没有加载组件。
ps。我用:
npm 6.14.6 nodejs v12.18.3 @vue/cli 4.5.4【讨论】:
【参考方案2】:我的症状与 OP 相同,但使用的是 netlify 和 gridsome(它使用 vue.js。在我的情况下,原因是错误标记的联系表单。
【讨论】:
【参考方案3】: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 );
【讨论】:
以上是关于VueJS 路由器不加载组件的主要内容,如果未能解决你的问题,请参考以下文章