路由跳转方式有两种:
1, 标签跳转
2, 编程式导航跳转 router.push(“/login”);
路由传值方式有四种:
路由传值方式一: url路径拼接传值
传: 在发送数据的组件中router-link路径后使用?拼接键值对传值
接: 在接收数据的组件中, 使用this.$route.query接收数据
{{$route.query.name}}-{{$route.query.age}}
路由传值方式二: 动态路由/动态url/友好url传值
1, 配: 在路由配置信息中, 把路径后添加 /:变量名
{path:”/login/:name”, component: LoginPage}
2, 传: 在发送数据的组件中router-link路径后使用/拼接数据 传值
3, 接: 在接收数据的组件中, 使用this.$route.params接收数据
{{$route.params.name}}
路由传值方式三: query对象传值
传: 在发送数据的组件中router-link路径to动态绑定对象, 对象的path字段设置url, 对象query字段设置数据
接: 在接收数据的组件中, 使用this.$route.query接收数据
{{$route.query.name}}-{{$route.query.age}}
路由传值方式四: 命名路由传值
传: 在发送数据的组件中router-link路径to动态绑定对象, 对象的name字段设置路由名, 对象query或params字段设置数据
接: 在接收数据的组件中, 使用this.$route.query接收数据
{{$route.query.name}}-{{$route.params.name}}
路由传值方式的区别:
params对象传值相比url/动态url/query对象传值的优缺点
1, 优点: params字段传值对数据的类型和长度无限制,
url传值和query传值都会把数据拼接到url上,长度有限制,数据类型只能是字符串,
2, 缺点: params字段传值,在页面刷新时数据会丢失
url传值和query传值都会把数据拼接到url上, 刷新页面,数据不会丢失
注意: router 和 $route
router : 全局唯一的路由配置对象, 用于路由配置和路由跳转
$route : 每一个路由跳转的组件都有一个路由信息对象, 用于路由传值和路由监听