vue路由之query传参

https://blog.csdn.net/u014628388/article/details/81085624配置完成后：1、:to="{name:'detail',query:{id:item.pid}}"<ul><li v-for="item in arr"><router-li

QQ帝国

5955人浏览 · 2018-08-22 21:50:18

QQ帝国 · 2018-08-22 21:50:18 发布

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

配置完成后：

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^