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

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

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

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

1|0query参数

1|1声明式导航(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

---

1|2编程式路由导航:

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  

---

2|0params参数

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

2|1声明式导航(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  

---

2|2编程式路由导航

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

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

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

 

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

query参数:

this.$route.query.id

params参数:

this.$route.params.id

 

 

 

 

 

 

__EOF__

本文作者：长安
本文链接：https://www.cnblogs.com/jingxin01/p/16413865.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！