您好,登錄后才能下訂單哦!
使用template實(shí)現(xiàn)如下頁面(仿餓了么布局)
如上圖.使用了4個(gè)組件,分別是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的代碼如下,其他兩個(gè)類似 <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>標(biāo)簽和<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">評價(jià)</router-link> </div> <div class="tab-item"> <router-link to="/seller/seller">商家</router-link> </div> </div> <!-- keep-alive:緩存所有的頁面,防止重復(fù)渲染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,就會使用默認(rèn)的 hash 模式,該模式下會將路徑格式化為 #! 開頭。 routes:routers, linkActiveClass : 'active' // 設(shè)置 鏈接激活時(shí)使用的 CSS 類名,默認(rèn)值: "router-link-active" }); export default router;
總結(jié)
以上所述是小編給大家介紹的vue.js template模板的使用(仿餓了么布局),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。