版权声明：非经本人同意，请勿转载。 https://blog.csdn.net/QQ_Empire/article/details/81949446
1、首先引入外部文件
<link rel="stylesheet" type="text/css" href="animate.css"/>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script src="axios.min.js" type="text/javascript" charset="utf-8"></script>
<script src="vue-router.js" type="text/javascript" charset="utf-8"></script>2、保证页面正常显示后，通过axios请求数据
mounted(){
var _this=this;
axios({
url:"http://jx.xuzhixiang.top/ap/api/productlist.php"
})
.then(function(data){
console.log(data.data.data)
_this.arr=data.data.data
})
}3、展示数据到页面
<router-link :to="'/detail/'+item.pid">{{item.pname}}</router-link>
router-link指带连接的标签，
：to是点击后要进入的页面/detail，
item.pid为具体的链接数据id
"'/detail/'+item.pid"，为要跳转的具体数据，注意引号格式
<ul>
<li v-for="(item,i) in arr"><router-link :to="'/detail/'+item.pid">{{item.pname}} </router-link></li>
</ul>4、在detail路由定义处用 :id 接收 item.pid，注意是 :id
// 路由规则定义
var routes=[
{path:'/home',component:Home},
{path:'/about',component:About},
{path:'/other',component:Other},
{path:'/detail/:id',component:Detail},
{path:'*',redirect:'/home'}
]5、在Detail里 mounted 函数 this.$route.params.id 可接收，
然后通过 params:{id:_this.$route.params.id} 往后台传值。
通过.then接收后台数据，给detail变量，然后在detail模板展示{{detail}}
var Detail={
template:'#detail',
data:function(){
return{
detail:''
}
},
mounted(){
console.log(this.$route.params.id)//接收id值
var _this=this;
axios({
url:"http://jx.xuzhixiang.top/ap/api/detail.php",
params:{id:_this.$route.params.id}
})
.then(function(data){
_this.detail=data.data.data.pdesc
})
}
}6、添加动画：<transition>标签包括路由容器
<transition
enter-active-class="animated slideInRight"
leave-active-class="animated zoomOutLeft"
>
<!--路由容器-->
<router-view></router-view>
</transition>-------------------------------------------------------
完整代码
<body>
<div id="out">
<h1>路由</h1>
<!--导航标签-->
<router-link to="/home" tag="span">首页</router-link>
<router-link to='/about' tag="span">关于</router-link>
<router-link to="/other" tag="span">其他</router-link>
<transition
enter-active-class="animated slideInRight"
leave-active-class="animated zoomOutLeft"
>
<!--路由容器-->
<router-view></router-view>
</transition>
</div>
<template id="home">
<div>
<h1>首页</h1>
<button @click="tap()">跳转到other</button>
qianfengmzj
<hr />
<ul>
<li v-for="(item,i) in arr"><router-link :to="'/detail/'+item.pid">{{item.pname}}</router-link></li>
</ul>
</div>
</template>
<template id="about">
<div>
<h1>about</h1>
<!--<p>{{this.$route.params.id}}</p>-->
</div>
</template>
<template id="other">
<div>
<h1>.qita.</h1>
</div>
</template>
<template id="detail">
<div>
<h2>详情</h2>
<p>{{detail}}</p>
</div>
</template>
</body>
<script type="text/javascript">
var Home={
template:'#home',
data:function(){
return {
arr:[]
}
},
methods:{
tap(){
router.push('/other')
}
},
mounted(){
var _this=this;
axios({
url:"http://jx.xuzhixiang.top/ap/api/productlist.php"
})
.then(function(data){
console.log(data.data.data)
_this.arr=data.data.data
})
}
}
var Detail={
template:'#detail',
data:function(){
return{
detail:''
}
},
mounted(){
console.log(this.$route.params.id)
var _this=this;
axios({
url:"http://jx.xuzhixiang.top/ap/api/detail.php",
params:{id:_this.$route.params.id}
})
.then(function(data){
_this.detail=data.data.data.pdesc
console.log(_this.detail)
})
}
}
var About={
template:'#about'
}
var Other={
template:'#other'
}
// 路由规则定义
var routes=[
{path:'/home',component:Home},
{path:'/about',component:About},
{path:'/other',component:Other},
{path:'/detail/:id',component:Detail},
{path:'*',redirect:'/home'}
]
// 实例化路由对象
var router=new VueRouter({
routes:routes
})
var vm=new Vue({
el:'#out',
router:router
})
</script>
</html>