Vue路由导航传参

目录

1.query传参

1.字符串传参

2.对象传参(搭配name)

3.对象传参(搭配path)

2.params传参

1.路由路径中不配置占位符

1.只能使用对象+name传参

2.路由路径中配置占位符

1. 字符串传参

2.对象传参(搭配name)

3.对象传参(使用path)

---

当项目中组件间通过路由跳转,有时,我们需要传递一个组件中的参数到另一个组件中使用,那么我们此时就不能够靠组件间直接传递数据,只能通过路由导航传参

路由传参有两种方式:query传参和params传参

1.query传参

参数会显示到地址栏中,类似get请求,所以当刷新页面时,不会丢失数据

1.字符串传参

在路径后面通过?拼接传递的参数,类似于get请求

<router-link to="/login?username=张三">登录</router-link>

2.对象传参(搭配name)

传递的参数在query对象中

<router-link :to="{name:'login',query:{username:'张三'}}">登录</router-link>

3.对象传参(搭配path)

<router-link :to="{path:'/login',query:{username:'张三'}}">登录</router-link>

编程式导航$router.push和$router.replace传参与router-link传参规则一样

2.params传参