Vue.js框架--动态路由Get传值（十七）

主要操作技能：

官网
https://router.vuejs.org/

中文网
https://router.vuejs.org/zh/guide/

一、不同路由传值:动态路由
1>配置路由
 routes:[
   //动态路径参数,以冒号开头
   {path:'/detail/:aid',component:Detail}
 ]

2>在对应的页面获取路由的值
this.$route.params

3>动态路由

<router-link :to="'/detail/'+key"></router-link>

<router-link :to="'/detail?id='+key"></router-link>

一、直接传值

 News.vue

<template>
	<div id="news">
		<h2>我是新闻组件</h2><br />
		<ul>
			<li v-for="(item,key) in list">
				 
		   <!--通过路由，跳转到详情页面哦,并将新闻数据传入到详情页面-->
			<!--<router-link to='/detail/123'> {{key}}--{{item}}</router-link>	-->
			
			<!--动态路由,将具体的值传过去-->
			<router-link :to="'/detail/'+key"> {{key}}--{{item}}</router-link>	
				
			</li>
		</ul>
	</div>
</template>

<script>

export default {
		data() {
			return {
				msg: '我是新闻组件哦!',
				list:['翠花','吉吉国王','熊二']
			}
		}

	}
</script>

Detail.vue

<template>
	<div id="detail">
		<h3>我是详情</h3>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				msg:'my detail!'
			}
		},
		mounted(){ //生命周期
			 console.log(this.$route.params);    //获取动态路由传值
		}
	}
</script>

 

  效果

  固定传值123

 动态传值key=0,1,2...

二、Get传值:

 Home.vue

<template>
	<!--所以的内容多要被根节点包含起来 -->
	<div id="home">
		<h3>首页组件</h3><br />
	
	     <ul>
	     	<li v-for="(item,key) in list">
	     		<!--get传值-->
	     		<!--<router-link to="/product?id=123">
	     			{{key}}--{{item}}
	     		</router-link>-->
	     		
	     		<!--动态传值-->
	     		<router-link :to="'/product?id='+key">
	     			{{key}}--{{item}}
	     		</router-link>
	     		
	     	</li>
	     </ul>
	     
	</div>
</template>

<script>
	
	export default {
		data() { //数据
			return {
				msg: 'I am home component!',
				list:['product1','product2','product3']
			}
		}

	}
</script>

Product.vue

 

<template>
	<div id="detail">
		<h3>商品详情</h3>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				msg:'my detail!'
			}
		},
		mounted(){ //生命周期
			   //获取get传值
			   console.log(this.$route.query);
		}
	}
</script>

 效果:

固定参数123

动态传值 key=0,1,2....