版权声明：非经本人同意，请勿转载。 https://blog.csdn.net/QQ_Empire/article/details/81951486
配置完成后：
1、:to="{name:'detail',query:{id:item.pid}}"
<ul>
<li v-for="item in arr"><router-link :to="{name:'detail',query:{id:item.pid}}">{{item.pname}}</router-link></li>
</ul>2、通过this.$route.query.id接收值. 然后params传值
var Detail={
template:'#detail',
data:function(){
return{
detail:''
}
},
mounted(){
var _this=this;
axios({
url:"http://jx.xuzhixiang.top/ap/api/detail.php",
params:{id:_this.$route.query.id}
}).then(function(data){
_this.detail=data.data.data.pdesc
})
},
watch:{
'$route'(a){
var _this=this;
axios({
url:"http://jx.xuzhixiang.top/ap/api/detail.php",
params:{id:a.query.id}
}).then(function(data){
_this.detail=data.data.data.pdesc
})
}
}
}3、改为嵌套路由，在list组件模板里面添加 <router-view></router-view>
<template id="list">
<div>
<h1>列表数据</h1>
<ul>
<li v-for="item in arr"><router-link :to="{name:'detail',query:{id:item.pid}}">{{item.pname}}</router-link></li>
</ul>
<hr />
<router-view></router-view>
</div>
</template>4、在list路径，添加子路由
var routes=[
{path:'/list',name:'list',component:List,
children:[
{path:'/detail',name:'detail',component:Detail}
]
},
{path:'/other',name:'other',component:Other},
{path:'*',redirect:'/list'}
]5、watch监听，id:a.query.id
var Detail={
template:'#detail',
data:function(){
return{
detail:''
}
},
mounted(){
var _this=this;
axios({
url:"http://jx.xuzhixiang.top/ap/api/detail.php",
params:{id:_this.$route.query.id}
}).then(function(data){
_this.detail=data.data.data.pdesc
})
},
watch:{
'$route'(a){
var _this=this;
axios({
url:"http://jx.xuzhixiang.top/ap/api/detail.php",
params:{id:a.query.id}
}).then(function(data){
_this.detail=data.data.data.pdesc
})
}
}
}
----------------------------------------------------------------------------------------------------------------------------------
完整的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<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>
</head>
<body>
<div id="out">
<h1>路由-query</h1>
<router-link :to="{name:'list'}">列表</router-link>
<router-link :to="{name:'other'}">其他</router-link>
<router-view></router-view>
</div>
<template id="list">
<div>
<h1>列表数据</h1>
<ul>
<li v-for="item in arr"><router-link :to="{name:'detail',query:{id:item.pid}}">{{item.pname}}</router-link></li>
</ul>
<hr />
<router-view></router-view>
</div>
</template>
<template id="other">
<div>
<h1>other</h1>
</div>
</template>
<template id="detail">
<div>
<h1>详情</h1>
<p>{{detail}}</p>
</div>
</template>
</body>
<script type="text/javascript">
var List={
template:"#list",
data:function(){
return{
arr:[]
}
},
mounted(){
var _this=this;
axios({
url:"http://jx.xuzhixiang.top/ap/api/productlist.php"
}).then(function(data){
_this.arr=data.data.data
})
}
}
var Detail={
template:'#detail',
data:function(){
return{
detail:''
}
},
mounted(){
var _this=this;
axios({
url:"http://jx.xuzhixiang.top/ap/api/detail.php",
params:{id:_this.$route.query.id}
}).then(function(data){
_this.detail=data.data.data.pdesc
})
},
watch:{
'$route'(a){
var _this=this;
axios({
url:"http://jx.xuzhixiang.top/ap/api/detail.php",
params:{id:a.query.id}
}).then(function(data){
_this.detail=data.data.data.pdesc
})
}
}
}
var Other={
template:"#other"
}
var routes=[
{path:'/list',name:'list',component:List,
children:[
{path:'/detail',name:'detail',component:Detail}
]
},
{path:'/other',name:'other',component:Other},
{path:'*',redirect:'/list'}
]
var router=new VueRouter({
routes:routes
})
var vm=new Vue({
el:"#out",
router:router
})
</script>
</html>