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