1.在app.vue中进行组件拆分,编写模板
<template>
<div id="app">
<div class="header">
我是头部
</div>
<div class="tab">
我是tab
</div>
<div class="content">
我是content
</div>
</div>
</template>
2.新建一个vue组件,比如header.vue,头部组件。(其实就是把组件替换成app.vue中的模板)
1.先在header.vue中导出export default{};
2.然后在app.vue中import header from './components/header/header.vue' 导入,同时使用(注册组件)
<!-- header.vue -->
<template>
<div class="header">
我是header
</div>
</template>
<script>
export default{};
</script>
<style>
</style>
//app.vue
//同时在html中使用<v-header>标签替换之前写的<div class="header">
<script>
import header from './components/header/header.vue'
export default{
components:{
'v-header':header
}
}
</script>
3.路由
参考官方文档,在app.vue的html中这样写:
(router-link最后会被渲染成a标签,router-view会被渲染成点击路由后要渲染的页面)
<template>
<div>
<v-header></v-header>
<div class="tab">
<div class="tab-item">
<router-link to="/goods">商品</router-link>
</div>
<div class="tab-item">
<router-link to="/ratings">评论</router-link>
</div>
<div class="tab-item">
<router-link to="/seller">商家</router-link>
</div>
</div>
<router-view></router-view>
</div>
</template>
在路由中(index.js)这样写:
import Vue from 'vue'
import Router from 'vue-router'
//引入模板文件
import Header from '@/components/header/header'
import Goods from '@/components/goods/goods'
import Ratings from '@/components/ratings/ratings'
import Seller from '@/components/seller/seller'
//如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)
Vue.use(Router)
//定义路由和实例化路由
export default new Router({
routes: [
{
path: '/',
name: 'Index',
redirect:'/goods'
},
{
path: '/goods',
name: 'Goods',
component: Goods
},
{
path: '/ratings',
name: 'Ratings',
component: Ratings
},
{
path: '/seller',
name: 'Seller',
component: Seller
}
]
})
这样就已经实现一个简单的页面跳转了。效果图:(样式还没写...)