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

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

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

query参数

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

传递参数

跳转

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

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

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

跳转

特别注意：路由携带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