最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
vue.js template模板的使用(仿饿了么布局)
时间：2022-06-25 15:47:49 编辑：袖梨 来源：一聚教程网
使用template实现如下页面(仿饿了么布局)
如上图.使用了4个组件,分别是header.vue,goods.vue,ratings.vue,seller.vue
header.vue代码如下
我是header头部goods.vue的代码如下,其他两个类似我是goods组件
在App.vue文件中,我们使用到了
代码如下
商品 评价 商家
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;
相关文章
- 《雷霆战机集结》装备/驾驶员/源晶养成攻略 06-16
- Solana因伊朗-以色列动荡遭受重创——SOL价格会持续下跌吗？ 06-16
- 《雷霆战机集结》Boss模式关卡刷取建议 06-16
- 《世界启元》S6赛季芝诺周瑜队搭配攻略 06-16
- 《世界启元》S6赛季新英雄达尔文技能分析及配队推荐 06-16
- 《纸嫁衣3鸳鸯债》全章节超详细攻略 06-16