vue.js template模板的使用

使用template实现如下页面(仿饿了么布局)

如上图.使用了4个组件,分别是header.vue,goods.vue,ratings.vue,seller.vue

header.vue代码如下

<template>
    <div class="header">
        我是header头部
    </div>
</template>
<script type="text/ecmascript-6">
    export default {

    };
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .header
        color:#fff
        background:rgba(7,17,27,0.5)
        text-align:center
        height:40px
        line-height:40px
</style>
goods.vue的代码如下,其他两个类似

<template>
    <div class="goods">
        我是goods组件
    </div>
</template>
<script type="text/ecmascript-6">
    export default {

    };
</script>

<style lang="stylus" rel="stylesheet/stylus">
    
</style>

在App.vue文件中,我们使用到了<router-link>标签和<router-view>

代码如下

<template>
    <div id="app">
        <!--头部组件-->
        <v-header></v-header>
        <div class="tab border-1px">
            <div class="tab-item">
                <router-link to="/goods/goods">商品</router-link>
            </div>
            <div class="tab-item">
                <router-link to="/ratings/ratings">评价</router-link>
            </div>
            <div class="tab-item">
                <router-link to="/seller/seller">商家</router-link>
            </div>
        </div>
        <!-- keep-alive:缓存所有的页面,防止重复渲染DOM -->
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
    </div>
</template>
<script type="text/ecmascript-6">
    // 引人组件
    import header from '@/components/header/header';
    export default {
        components: {
            'v-header': header
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import "./common/stylus/mixin.styl";

    .tab
        display:flex
        width:100%
        height:40px
        line-height:40px
        border-1px(rgba(7,17,27,0.1))
        .tab-item
            flex:1
            text-align:center
            & > a
                display:block
                font-weight:700
                text-decoration:none
                font-size:14px
                color:rgb(77,85,93)
                &.active
                    color:yellow
</style>
index.js中这样写

import Vue from 'vue';
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';
//引入自定义的组件
import Goods from '@/components/goods/goods';
import Ratings from '@/components/ratings/ratings';
import Seller from '@/components/seller/seller';

Vue.use(VueRouter);
Vue.use(VueResource);

const routers = [{
    path:'/goods/goods',
    name:'goods',
    component:Goods
},{
    path:'/ratings/ratings',
    name:'ratings',
    component:Ratings
},{
    path:'/seller/seller',
    name:'seller',
    component:Seller
}];

const router =new VueRouter({
     mode:'history', //如果不配置 mode，就会使用默认的 hash 模式，该模式下会将路径格式化为 #! 开头。
     routes:routers,
    linkActiveClass : 'active' // 设置 链接激活时使用的 CSS 类名,默认值: "router-link-active"
 });

 export default router;