//要先安装好node，npm，webpack在建立 vue -cli 脚手架
先新建一个空文件夹，名字不要有中文，在文件夹打开命令窗口执行下面命令
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目（只有路由Y，下面3个都N）
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
# npm根据package.json下载需要文件
$ npm install
# 运行npm中script的dev
//开发模式
$ npm run dev
//生产模式
$ npm run build
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import newslist from '@/components/news/newslist'
import newsshow from '@/components/news/newsshow'
import imagelist from '@/components/photo/imagelist.vue'
import imgshow from '@/components/photo/imgshow.vue'
import goodslist from '@/components/goods/goodslist.vue'
import goodsshow from '@/components/goods/goodsshow.vue'
import goodsdesc from '@/components/goods/goodsdesc.vue'
import goodscomment from '@/components/goods/goodscomment.vue'
import shopcar from '@/components/shopcar/shopcar.vue'
Vue.use(Router)
export default new Router({
linkActiveClass:'mui-active', //将激活的路由添加一个mui-active类名称
routes:[
//redirect表示默认由Home占据
{path:'/',redirect:'/Home'},
{path:'/Home',component:home},
{path:'/news/newslist',component:newslist},
//带参数跳转
{path:'/news/newsshow/:newsid',component:newsshow},
{path:'/photo/imagelist',component:imagelist},
{path:'/photo/imageshow/:imgid',component:imgshow},
{path:'/goods/goodslist',component:goodslist},
{path:'/goods/goodsshow/:goodsid',component:goodsshow},
// button跳转
{name:'goodsdesc',path:'/goods/goodsdesc/:goodsid',component:goodsdesc},
{name:'goodscomment',path:'/goods/goodscomment/:goodsid',component:goodscomment},
{path:'/shopcar',component:shopcar}
]
})
1.Home的9宫格
<!-- 2.0 9宫格导航区域 使用的mui中的9宫格样式 -->
<div class="mui-content">
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<router-link to="/news/newslist">
<span class="mui-icon mui-icon-home">
</span>
<div class="mui-media-body">新闻资讯</div></router-link></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<router-link to="/photo/imagelist">
<span class="mui-icon mui-icon-email"></span>
<div class="mui-media-body">图片分享</div></router-link></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<router-link to="/goods/goodslist">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">商品购买</div></router-link></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">留言反馈</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">视频专区</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">联系我们</div></a></li>
</ul>
</div>
2. Home ---newslist---newsshow---子组件
//home页面Home ---newslist
<router-link to="/news/newslist">
<span class="mui-icon mui-icon-home">
</span>
<div class="mui-media-body">新闻资讯</div>
</router-link>
//newlist页面newslist---newsshow（）
<li v-for="item in newslist" class="mui-table-view-cell mui-media">
<router-link v-bind="{to:'/news/newsshow/'+item.id}">
<div class="mui-media-body">
{{item.title}}
<p class='mui-ellipsis'>
发表时间：{{item.add_time | datefmt}}
<span>点击:{{item.click}}</span>
</p>
</div>
</router-link>
</li>
//newshow页面引入子组件（3步曲）
<!-- 3.0 评论组件 -->
<comment :artid="newsid"></comment>
import comment from '../subcom/comment.vue';
components:{
comment // comment:comment
}
3.button形式的按键路由跳转
goodsshow页面的button跳转，这里是
<!-- 4.0 图文介绍和商品评论 -->
<mt-button @click="todesc" type="danger" size="large" plain>图文介绍</mt-button>
<mt-button @click="tocomment" type="danger" size="large" plain>商品评论</mt-button>
methods:{
// 导航到评论组件
tocomment(){
this.$router.push({name:'goodscomment',params:{goodsid:this.goodsid}});
},
// 导航到图文介绍组件
todesc(){
// 如何利用js代码进行路由跳转
this.$router.push({ name: 'goodsdesc', params: { goodsid: this.goodsid }});
},
}
1.路由带参数
router/index.js: {path:'/goods/goodsshow/:goodsid',component:goodsshow},
newslist页面: <router-link v-bind="{to:'/news/newsshow/'+item.id}">.....</router-link>
newsshow页面 //获取参数
data(){
return {
isshow:false, //小球默认是隐藏的
goodsid:0,
count:1, //接收inputNumber.vue组件传入的值
swipeList:[],
info:{}
}
},
created(){
this.goodsid = this.$route.params.goodsid;
// 调用数据获取工作
this.getswipelist();
this.getinfo();
},
2.父给子传数值
[newshow 和 comment子组件之间的参数传递](http://www.jianshu.com/p/ad18852f6d1d)
3.子给父传数值
[goodsshow和inputNumber子组件之间的参数传递](http://www.jianshu.com/p/76f3acd3aaaa)
4.父给子加字给父
5.跨组件传值
[跨组件传值](http://www.jianshu.com/p/eb46d7ede316)
网友评论