最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
vue.js template模板的使用(仿饿了么布局)
时间:2018-08-16 编辑:猪哥 来源:一聚教程网
使用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;
相关文章
- js实现音乐播放器代码展示 10-12
- js实现图片查看器代码展示 10-12
- JS中switch的四种写法介绍 10-12
- js实现新闻轮播效果教程 10-11
- JS实现简单的图片切换功能教程 10-11
- js实现下拉刷新和上拉加载解析 09-28