路由跳转传值

路由跳转方式有两种:
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 : 每一个路由跳转的组件都有一个路由信息对象, 用于路由传值和路由监听