1、配置動態路由
//請求數據
import VueResource from 'vue-resource';
Vue.use(VueResource);
//動態路由兩種方式
{path: '/pcontent', component:Content },//第一種
{ path: '/content/:aid', component: Content}, //第二種
2、父組件添加動態路由
兩種方式與下方獲取路由對應即可
<router-link :to="'/content?aid='+item.aid">{{item.title}}</router-link>//第一種
<router-link :to="'/content/'+item.aid">{{item.title}}</router-link>//第二種
3、父組件傳參並請求數據
this.$http.jsonp(api).then((response)=>{
console.log(response);
//注意:用到this要注意this指向
this.list=response.body.result;
},function(err){
console.log(err);
})
4、子組件獲取動態路由
this.$route.query//第一種動態路由
this.$route.params//第二種動態路由
5、子組件請求數據
var api='http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid='+aid;
this.$http.get(api).then((response)=>{
console.log(response);
this.list=response.body.result[0];
},(err)=>{
console.log(err)
})
下面用第二種動態路由方式演示
main.js
import Vue from 'vue';
import App from './App.vue';
//請求數據
import VueResource from 'vue-resource';
Vue.use(VueResource);
//luyou
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//1.創建組件
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';
import Pcontent from './components/Pcontent.vue';
//2.配置路由 注意:名字
const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News },
{ path: '/content/:aid', component: Content }, /*動態路由*/
{ path: '/pcontent', component: Pcontent },
{ path: '*', redirect: '/home' } /*默認跳轉路由*/
]
//3.實例化VueRouter 注意:名字
const router = new VueRouter({
routes // (縮寫)相當於 routes: routes
})
//4、掛載路由
new Vue({
el: '#app',
router,
render: h => h(App)
})
//5 <router-view></router-view> 放在 App.vue
App.vue
<template>
<div id="app">
<router-link to="/home">首頁</router-link>
<router-link to="/news">新聞</router-link>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
data () {
return {
msg:'你好vue'
}
}
}
</script>
<style lang="scss">
</style>
News.vue
<template>
<div id="news">
我是新聞組件
<ul class="list">
<li v-for="(item,key) in list" :key="key">
<router-link :to="'/content/'+item.aid">{{item.title}}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default{
data(){
return {
msg:'我是一個新聞組件' ,
list:[]
}
},
methods:{
requestData(){
//jsonp請求的話 後臺api接口要支持jsonp
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
this.$http.jsonp(api).then((response)=>{
console.log(response);
this.list=response.body.result;
},function(err){
console.log(err);
})
}
},
mounted(){
this.requestData();
}
}
</script>
<style lang="scss" scoped>
.list{
li{
height:3.4rem;
line-height:3.4rem;
boder-bottom:1px solid #eee;
font-size:1.6rem;
a{
color:#666;
}
}
}
</style>
Content.vue
<template>
<div id="content">
<h2>{{list.title}}</h2>
<div v-html="list.content"></div>
</div>
</template>
<script>
export default{
data(){
return{
msg:'數據',
list:[]
}
},
mounted(){
console.log(this.$route.params); /*獲取動態路由傳值*/
var aid=this.$route.params.aid;
//調用請求數據的方法
this.requestData(aid);
},
methods:{
requestData(aid){
//get請求如果跨域的話 後臺php java 裏面要允許跨域請求
console.log(aid);
var api='http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid='+aid;
this.$http.get(api).then((response)=>{
console.log(response);
this.list=response.body.result[0];
},(err)=>{
console.log(err)
})
}
}
}
</script>
<style lang="scss">
#content{
padding:1rem;
line-height:2;
img{
max-width:100%;
}
}
</style>
效果
先點擊“新聞“,再點擊新聞標題跳轉詳情頁
注:教學內容出自視頻教學IT營itying.com 大地老師Vue基礎教程