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

绝地灬酷狼 2024-02-18 23:44 17阅读 0赞

**主要操作技能：**

**官网  
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/'+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**

**![70][]**

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

**![70 1][]**

## **二、Get传值:** ##

Home.vue

<template>
    	
    	<div id="home">
    		<h3>首页组件</h3><br />
    	
    	     <ul>
    	     	<li v-for="(item,key) in list">
    	     		
    	     		
    	     		
    	     		
    	     		<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>

效果:

![70 2][]

固定参数123

![70 3][]

![70 4][]

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

![70 5][]

![70 6][]

[70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/ae3d2433697640e8826b9e72a04326d1.png
[70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/d09bd81ee1e8453489bac7abd8ebe46b.png
[70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/11f1bf6dd66f4221b19a0d1918f04bb9.png
[70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/3bec17c5aaab4e77aabfb018b868816e.png
[70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/59baf3164ee346b8aca3f3687100f0aa.png
[70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/1ce641f0d15446668cb773625337b76a.png
[70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/2a3c540462f345139e98b9c68ea7d319.png