Vue组件通信---Router传参/9

vue路由的两种导航传参方式:

1.声明式导航(router-link)

2.编程式导航(push|replace)

query参数

声明式导航(router-link)

父组件: 

传递参数

<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link to="/home/?id=1">跳转</router-link>
				
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link 
	:to="{
		path:'/home',
		query:{
		   id:1,
		}
	}">
    跳转
</router-link>

路由配置:{path: '/home',component: () => import('@/pages.home') }

地址栏中的显示:http://localhost:8080/#/home/?id=1

---

编程式路由导航:

this.$router.push({
    path: `/home/${this.id}`,
});

路由配置:{path:'/home/:id', component:Home} 

地址栏中的显示:http://localhost:8080/#/home/1 

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

路由配置:{path:'/home', component:Home}

地址栏中的显示:http://localhost:8080/#/home?id=1  

---

params参数

使用params参数需要配置路由,让路由提前占位;如果不提取占位的话,页面刷新数据会丢失

声明式导航(router-link) 

传递参数

<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link to="/home/1">跳转</router-link>

路由配置:{path:'/home/:id', component:Home} 

使用占位符声明接收params参数

地址栏中的显示:http://localhost:8080/#/home/1  

<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:1,
		}
	}"
>跳转</router-link>

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

路由配置:{name:'xiangqing',path:'/home',component:Home}

地址栏中的显示:http://localhost:8080/#/home  

---

编程式路由导航

this.$router.push({
	name:'xiangqing',
		params:{
			id:1,
		}
})

路由配置:{name:'xiangqing',path: '/home',component: () => import('@/pages/home'), } 

地址栏中的显示:http://localhost:8080/#/home      

 

子组件如何获取路由中的信息

query参数:

this.$route.query.id

params参数:

this.$route.params.id