- 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 給這個頁面路徑定義一個名字，當(dāng)在頁面進(jìn)行跳轉(zhuǎn)的時候也可以用名字跳轉(zhuǎn)，要唯一喲
component 組件，就是咱們在最上面引入的 import ...了，當(dāng)然這個組件的寫法還有一種懶加載
Home.vue'頁面9宮格，用 <router-link to="/news/newslist"> </router-link>代替a標(biāo)簽跳轉(zhuǎn)
<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">視頻專區(qū)</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">聯(lián)系我們</div></a></li>
</ul>
</div>
router帶參數(shù)跳轉(zhuǎn)
newslist.vue的模版
帶參數(shù)的 要用v-bind綁定來綁定路由
item.id，在后臺數(shù)據(jù)里面會拿到
<template>
<div class="tmpl">
<ul class="mui-table-view">
<!-- 靜態(tài)結(jié)構(gòu) <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'>
發(fā)布時間：2017-1-1
<span>點(diǎn)擊: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'>
發(fā)表時間：{{item.add_time | datefmt}}
<span>點(diǎn)擊:{{item.click}}</span>
</p>
</div>
</router-link>
</li>
</ul>
</div>
</template>
newsshow.vue的頁面
獲取參數(shù) var newsid = this.$route.params.newsid;
如何ajax求數(shù)據(jù)
<template>
<div class="tmpl">
<!-- 1.0 標(biāo)題 -->
<div class="twarp">
<h2 v-text="info.title"></h2>
<span class="desc">
{{info.add_time | datefmt}}
{{info.click}}次瀏覽
分類:民生
</span>
</div>
<!-- 2.0 新聞詳細(xì)展示區(qū)域 -->
<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 導(dǎo)入評論組件對象
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>
