VueJS Router不加载组件
doo*_*ean 2 vue.js vue-router vue-component
我正在使用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之外,没有任何内容从主页面更改.网址变为
但是没有加载我导入的组件.
如果您需要更多信息来提供建议,请随时提出更多建议.如果您对此问题有任何疑问,我将不胜感激.
谢谢.
Phi*_*hil 11
VueRouter期望被调用的对象键routes,您正在传递它routers.
试试这个...
let router = new VueRouter({mode: 'history', routes: routers});
或者,将"路由器"变量重命名为"routes".例如
export const routes=[
和
import {routes} from './router'
// snip
let router = new VueRouter({mode: 'history', routes });
| 归档时间： |
|
| 查看次数： |
7931 次 |
| 最近记录： |