vue路由传参的方式

一、传参方式

两种方式：

1. query传参。 适用场景：页面搜索
2. params传参。 适用场景：详情页

1.创建components/MyGoods.vue - 准备接收路由上传递的参数和值

<div>
    你要浏览的页面是: {
   
   { $route.query.name }} {
   
   { $route.params.goodsId}}
</div>

2.路由定义

3.导航跳转, 传值给MyGoods.vue组件

<li><router-link to="/goods?name=大米">东北</router-link></li>
<li><router-link to="/goods/123">详情</router-link></li>

 

 

小结

?key=value =》  用$route.query.key 取值

/值-需要提前在路由规则/path/:key =》  用$route.params.key  取值

 二、编程式导航

1.编程式导航

编程式： 写代码

导航：页面跳转

编程式导航 ====> 写代码的方式来让页面跳转

API

2.路由嵌套 

原理：router-view中再次包含router-view。

背景：一个组件内部包含的业务还是很复杂，需要再次进行拆分。

格式：