这是html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用指令 v-link 进行导航。 -->
<a v-link="{ path: '/foo' }">Go to Foo</a>
<a v-link="{ path: '/bar' }">Go to Bar</a>
</p>
<!-- 路由外链 -->
<router-view></router-view>
</div>
<script src="bundle.js"></script>
</body>
</html>
这是入口文件
import Vue from 'vue';
import VueRouter from 'vue-router';
import {Footers} from './src/component/footers.vue';
import {Headers} from './src/component/headers.vue';
Vue.use(VueRouter);
// 路由器需要一个根组件。
// 出于演示的目的,这里使用一个空的组件,直接使用 HTML 作为应用的模板
var App = Vue.extend({})
// 创建一个路由器实例
// 创建实例时可以传入配置参数进行定制,为保持简单,这里使用默认配置
var router = new VueRouter()
// 定义路由规则
// 每条路由规则应该映射到一个组件。这里的“组件”可以是一个使用 Vue.extend
// 创建的组件构造函数,也可以是一个组件选项对象。
// 稍后我们会讲解嵌套路由
router.map({
'/foo': {
component:Headers
},
'/bar': {
component:Footers
}
})
// 现在我们可以启动应用了!
// 路由器会创建一个 App 实例,并且挂载到选择符 #app 匹配的元素上。
router.start(App, '#app')
这是其中一个组件
<template>
<div>
<h1>hello,React</h1>
<h2>hello,Vue</h2>
</div>
</template>
<style lang='less' rel='stylesheet/less' scoped>
@color1:red;
@color2:green;
div{
width: 200px;
height: 200px;
background: #e3e49c;
h1{
color:@color1;
}
h2{
color:@color2;
}
}
</style>
<script>
module.exports={
}
</script>
打包成bundle之后,我点击链接,路由起作用了,但是组件没显示出来啊?这是怎么回事啊