vue路由之query传参

 https://blog.csdn.net/u014628388/article/details/81085624

配置完成后：

1、:to="{name:'detail',query:{id:item.pid}}"

	
{{item.pname}}

 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组件模板里面添加

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
				})
			}
		}
	}
	

----------------------------------------------------------------------------------------------------------------------------------

 

 

 完整的代码

	

		
路由-query
		
		列表
		其他