vue之嵌套路由params传参

1、把子路由容器放在home模板结构，<router-view></router-view><template id="home"><div><h1>首页</h1><button @click=&

QQ帝国

2990人浏览 · 2018-08-22 20:27:56

QQ帝国 · 2018-08-22 20:27:56 发布

1、把子路由容器放在home模板结构，<router-view></router-view>

<template id="home">
		<div>
			<h1>首页</h1>
			<button @click="tap()">跳转到other</button>
			
			<hr />
			<ul>
				<li v-for="(item,i) in arr"><router-link  :to="'/detail/'+item.pid">{{item.pname}}</router-link></li>
			</ul>
			
			<hr />
			<!--子路由容器-->
			<router-view></router-view>
			
			
		</div>
</template>

2、改变路由规则为父子元素

//	路由规则定义
	var routes=[
		{path:'/home',component:Home,
			children:[
				{path:'/detail/:id',component:Detail}
			]
		},
		{path:'/about',components:{default:About,'other':Other}},
		{path:'/qita',name:'other',component:Other},
		{path:'*',redirect:'/home'}
	]

3、此时点击后只能点击一次，原因是路由嵌套不能动态改变新得到的值（路由嵌套传值的弊端），这里解决方法是用watch(‘$route’(a,b){a为新传入的值，b为原来的值})监听，这里只用a值即可，a.params.id即为新传入的值，这时候a.params.id=_this.$route

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.params.id}
			})
			.then(function(data){
				_this.detail=data.data.data.pdesc
			})

		},
		watch:{
			'$route'(a){
//				console.log(a.params.id)
				var _this=this;
				axios({
					url:"http://jx.xuzhixiang.top/ap/api/detail.php",
					params:{id:a.params.id}
				})
				.then(function(data){
					_this.detail=data.data.data.pdesc
				})
				
			}
		}
	}

params 方式传参和接收参数

params 传参路由界面： router.js: 路由设置这里，当你使用 params 方法传参的时候，要在路由后面加参数名，并且传参的时候，参数名要跟路由后面设置的参数名对应。使用 query 方法，就没有这种限制，直接在跳转里面用就可以传参: this.$router.push({ name:'xxx' params:{ id:id } }) 接收参数: this.$route.params.id

注意：如果路由上面不写参数，也是可以传过去的，但不会在 url 上面显示出你的参数，并且当你跳到别的页面或者刷新页面的时候参数会丢失（如下图所示），那依赖这个参数的 http 请求或者其他操作就会失败。

query 传参和 params 传参的区别

用法上的： query 要用 path 来引入，params 要用 name 来引入，接收参数都是类似的，分别是 this.$route.query.name 和 this.$route.params.name。注意接收参数的时候，已经是$route 而不是$router 了哦！！
展示上的： query 更加类似于我们 ajax 中 get 传参，params 则类似于 post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示所以两者不能同时使用！！！

router-link 和编程式导航两种跳转方式

通过 router-link 我们可以向路由到的组件传递参数，这在我们实际使用中时非常重要的。

编程式导航

router.push
router.replace 和 router.push()不同，使用 router.replace()会将一个访问记录 push 到 url 中，所以再退回了的时候一定会回到这里，而 router.replace()不是添加一个新的进入，而是替换栈顶元素，这样，在返回的时候，就会返回到栈顶元素的下面一个。
router.go
- 在浏览器记录中前进一步，等同于 history.forward() router.go(1)
- 后退一步记录，等同于 history.back() router.go(-1)

动态传参之坑

注意:params 传参，push 里面只能是 name:'xxxx',不能是 path:'/xxx',因为 params 只能用 name 来引入路由，如果这里写成了 path，接收参数页面会是 undefined！！

完整的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/axios.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue-router.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
	.router-link-active{
		color: blue;
	}
</style>
</head>
<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="{name:'other'}" tag="span">其他</router-link>
		
		
		<!--路由容器-->
		<router-view></router-view>	 
		
		<router-view name="other"></router-view>
		
		
	</div>
	
	
	<template id="home">
		<div>
			<h1>首页</h1>
			<button @click="tap()">跳转到other</button>
			
			<hr />
			<ul>
				<li v-for="(item,i) in arr"><router-link  :to="'/detail/'+item.pid">{{item.pname}}</router-link></li>
			</ul>
			
			<hr />
			<!--子路由容器-->
			<router-view></router-view>
			
			
		</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(){
			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
			})

		},
		watch:{
			'$route'(a){
//				console.log(a.params.id)
				var _this=this;
				axios({
					url:"http://jx.xuzhixiang.top/ap/api/detail.php",
					params:{id:a.params.id}
				})
				.then(function(data){
					_this.detail=data.data.data.pdesc
				})
				
			}
		}
	}
	
	
	var About={
		template:'#about'
	}
	
	var Other={
		template:'#other'
	}
	
//	路由规则定义
	var routes=[
		{path:'/home',component:Home,
			children:[
				{path:'/detail/:id',component:Detail}
			]
		},
		{path:'/about',components:{default:About,'other':Other}},
		{path:'/qita',name:'other',component:Other},
		{path:'*',redirect:'/home'}
	]
	
//	实例化路由对象
	var router=new VueRouter({
		routes:routes
	})
	
	
	
	var vm=new Vue({
		el:'#out',
		router:router
	})
	
	
//	导航路由
//	编程路由
//	单容器路由
//	嵌套路由
//	路由params传参
	
	
</script>
</html>