声明路由,路由传参,动态路由

• this.$router.push('/goods/detail');
• this.$router.push({path:'/goods/detail',query:{id:id}});
• 函数挂载

mounted:function(){
	this.goodsId=this.$route.query.id
},

• this.$router.push(name:'detail',params:{id:id})
• this.goodsId=this.$route.params.id
• this.$router.push('/goods/detail/${id}')
• this.goodsId=this.$route.params.id

传参方式1:

this.$router.push('/goods/detail/${id}')

this.goodsId=this.$route.params.id

• goods.vue

<template>
	<ul>
		<li @click="getGdoos(goods.id)" v-for="goods,index in goodsList" :key="index">
			{{goods.name}}
		</li>
	</ul>
</template>

<script>
	export default{
		data:function(){
			return {
				goodsList:[
					{id:1,name:'小明'},
					{id:2,name:'小花'},
					{id:3,name:'小红'}
				]
			}
		},
		methods:{
			getGdoos:function(id)
			{
				// console.log(id)	
				// 详情页跳转是编程式路由,push后面是跳转路径
				//push里面要用反引号,这个id和函数function的id对应
				//这种形式写,后面的路由需要改成动态路由
				this.$router.push(`/goods/detail/${id}`)
			}
		}
	}

</script>

<style>
</style>

• Detail.vue

<template>
	<ul>
		<li @click="getGdoos(goods.id)" v-for="goods,index in goodsList" :key="index">
			{{goods.name}}
		</li>
	</ul>
</template>

<script>
	export default{
		data:function(){
			return {
				goodsList:[
					{id:1,name:'小明'},
					{id:2,name:'小花'},
					{id:3,name:'小红'}
				]
			}
		},
		methods:{
			getGdoos:function(id)
			{
				// console.log(id)	
				// 详情页跳转是编程式路由,push后面是跳转路径
				//push里面要用反引号,这个id和函数function的id对应
				//这种形式写,后面的路由需要改成动态路由
				this.$router.push(`/goods/detail/${id}`)
			}
		}
	}

</script>

<style>
</style>

• index.js

{
		// path:'/goods/detail',
		// 动态路由,detail后面的参数会议id的形式传过来
		path:'/goods/detail/:id',
		component:Detail,
	},

传参方式2 query方式 ,类似get传参, 参数在url都能看到

this.$router.push({path:'/goods/detail',query:{id:id}})

this.$route.query.id

• index.js

{
		path:'/goods/detail', //query的方式就不能是动态路由了
		// 动态路由,detail后面的参数会议id的形式传过来
		// path:'/goods/detail/:id',
		component:Detail,
	},

• Goods.vue

<template>
	<ul>
		<li @click="getGdoos(goods.id)" v-for="goods,index in goodsList" :key="index">
			{{goods.name}}
		</li>
	</ul>
</template>

<script>
	export default{
		data:function(){
			return {
				goodsList:[
					{id:1,name:'小明'},
					{id:2,name:'小花'},
					{id:3,name:'小红'}
				]
			}
		},
		methods:{
			getGdoos:function(id)
			{
				// console.log(id)	
				// 详情页跳转是编程式路由,push后面是跳转路径
				//push里面要用反引号,这个id和函数function的id对应
				//这种形式写,后面的路由需要改成动态路由
				// this.$router.push(`/goods/detail/${id}`)
				
				// 第一个id是自定义参数名 
				this.$router.push({path:'/goods/detail',query:{id:id}});
			}
		}
	}

</script>

<style>
</style>

• Detail.vue

<template>
	<ul>
		<li @click="getGdoos(goods.id)" v-for="goods,index in goodsList" :key="index">
			{{goods.name}}
		</li>
	</ul>
</template>

<script>
	export default{
		data:function(){
			return {
				goodsList:[
					{id:1,name:'小明'},
					{id:2,name:'小花'},
					{id:3,name:'小红'}
				]
			}
		},
		methods:{
			getGdoos:function(id)
			{
				// console.log(id)	
				// 详情页跳转是编程式路由,push后面是跳转路径
				//push里面要用反引号,这个id和函数function的id对应
				//这种形式写,后面的路由需要改成动态路由
				// this.$router.push(`/goods/detail/${id}`)
				
				// 第一个id是自定义参数名 
				this.$router.push({path:'/goods/detail',query:{id:id}});
			}
		}
	}

</script>

<style>
</style>

路由传参3 类似post

this.$router.push({name:'detail',params:{id:id}});

this.goodsid = this.$route.params.id

用这个的好处就是url看不见参数,query在url能看见参数

• index.js

	{
		path:'/goods/detail', //query的方式就不能是动态路由了
		// 动态路由,detail后面的参数会议id的形式传过来
		// path:'/goods/detail/:id',
		
		name:'detail',//声明路由, 给路由取一个名字,传参的时候就不用path了
		component:Detail,
	},

• Goods.vue

<template>
	<ul>
		<li @click="getGdoos(goods.id)" v-for="goods,index in goodsList" :key="index">
			{{goods.name}}
		</li>
	</ul>
</template>

<script>
	export default{
		data:function(){
			return {
				goodsList:[
					{id:1,name:'小明'},
					{id:2,name:'小花'},
					{id:3,name:'小红'}
				]
			}
		},
		methods:{
			getGdoos:function(id)
			{
				// console.log(id)	
				// 详情页跳转是编程式路由,push后面是跳转路径
				//push里面要用反引号,这个id和函数function的id对应
				//这种形式写,后面的路由需要改成动态路由
				// this.$router.push(`/goods/detail/${id}`)
				
				// 第一个id是自定义参数名 
				// this.$router.push({path:'/goods/detail',query:{id:id}});
				
				//name是路由index.js中的name参数值,辞用name,后面参数必须用params
				this.$router.push({name:'detail',params:{id:id}});
			}
		}
	}

</script>

<style>
</style>

• Detail.vue

<template>
	<p>我是商品详情页,商品id是{{goodsid}}</p>
</template>

<script>
	export default{
		created:function(){
			this.goodsid = this.$route.params.id
			
			
			// this.goodsid = this.$route.query.id
			
			
			// this.goodsid = this.$route.params.id
			// this.$route.params.id 获取参数名为id的值
			// console.log('good_id:'+this.$route.params.id)
			
			//query方式获取参数值
			console.log('good_id:'+this.$route.query.id)
		},
		data:function(){
			return {
				goodsid:''
			}
		}
	}
</script>

<style>
</style>