页面上用vue-router,如何显示对应的组件?

这是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之后,我点击链接,路由起作用了,但是组件没显示出来啊?这是怎么回事啊

阅读 10.8k
3 个回答
import Footers from './src/component/footers.vue';
import Headers from './src/component/headers.vue';

component: "Headers"
component: "Footers"

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题