- vue2中路由的写在项目的src/router/index.js 里
import Vue from 'vue'
import Router from 'vue-router'
import home from '@/components/Home.vue';
import newslist from '@/components/news/newslist.vue'
import newsshow from '@/components/news/newsshow.vue'
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:[
{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},
{name:'goodsdesc',path:'/goods/goodsdesc/:goodsid',component:goodsdesc},
{name:'goodscomment',path:'/goods/goodscomment/:goodsid',component:goodscomment},
{path:'/shopcar',component:shopcar}
]
})
routes就是我们的大核心了，里面包含我们所有的页面配置。
path 很简单，就是我们的访问这个页面的路径
name 给这个页面路径定义一个名字，当在页面进行跳转的时候也可以用名字跳转，要唯一哟
component 组件，就是咱们在最上面引入的 import ...了，当然这个组件的写法还有一种懒加载
Home.vue'页面9宫格，用 <router-link to="/news/newslist"> </router-link>代替a标签跳转
<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>
router带参数跳转
newslist.vue的模版
带参数的 要用v-bind绑定来绑定路由
item.id，在后台数据里面会拿到
<template>
<div class="tmpl">
<ul class="mui-table-view">
<!-- 静态结构 <li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="../../../statics/imgs/menu4.png">
<div class="mui-media-body">
幸福
<p class='mui-ellipsis'>
发布时间：2017-1-1
<span>点击:1</span>
</p>
</div>
</a>
</li> -->
<li v-for="item in newslist" class="mui-table-view-cell mui-media">
<router-link v-bind="{to:'/news/newsshow/'+item.id}">
<img class="mui-media-object mui-pull-left" :src="item.img_url">
<div class="mui-media-body">
{{item.title}}
<p class='mui-ellipsis'>
发表时间：{{item.add_time | datefmt}}
<span>点击:{{item.click}}</span>
</p>
</div>
</router-link>
</li>
</ul>
</div>
</template>
newsshow.vue的页面
获取参数 var newsid = this.$route.params.newsid;
如何ajax求数据
<template>
<div class="tmpl">
<!-- 1.0 标题 -->
<div class="twarp">
<h2 v-text="info.title"></h2>
<span class="desc">
{{info.add_time | datefmt}}
{{info.click}}次浏览
分类:民生
</span>
</div>
<!-- 2.0 新闻详细展示区域 -->
<div class="content" v-html="info.content"></div>
<!-- 3.0 评论组件 -->
<comment :artid="newsid"></comment>
</div>
</template>
<script>
import common from '../../kits/common.js';
import { Toast } from 'mint-ui';
// 1.0 导入评论组件对象
import comment from '../subcom/comment.vue';
export default{
data(){
return {
info:{},
newsid:0
}
},
methods:{
getinfo(){
// 1.0 获取url传入的newsid
var newsid = this.$route.params.newsid;
this.$http.get(common.apiDomain+'/api/getnew/'+newsid)
.then(res=>{
if(res.body.status !==0){
Toast(res.body.message);
return;
}
this.info = res.body.message[0];
});
}
},
created(){
// 初始化newsid
this.newsid = this.$route.params.newsid;
this.getinfo();
},
components:{
comment // comment:comment
}
}
</script>
