使用template实现如下页面(仿饿了么布局)
如上图.使用了4个组件,分别是header.vue,goods.vue,ratings.vue,seller.vue
header.vue代码如下
index.js中这样写
自定义的组件
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;
总结
以上所述是小编给大家介绍的vue.js template模板的使用(仿饿了么布局)。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/vue/31021.html