Vue页面跳转时传参总结

1 路由跳转

    <router-link   to="/login">

    <router-link/>

       跳转到 path:'/login' 的页面

2  路由跳转时传参

      2.1   传参的页面<template>中  ：    <router-link :to="'/home/newsinfo/' + item.id"> <router-link/>

      2.2   参数接收

             data() {

                        return {

                                    id: this.$route.params.id, // 将 URL 地址中传递过来的 Id值，挂载到 data上，方便以后调用

                        };

             }

       2.3   router.js内路由的配置

               { path: '/home/newsinfo/:id', component: Newsinfo ，name:'Newsinfo'}

3  编程式页面跳转

        this.$router.push({ name:'Home' })       跳转到name为Home的页面

4 编程式页面跳转时传参

     4.1   params 传参  :  相当于post请求，页面跳转时参数不会在地址栏中显示

            this.$router.push({

                   name:'',

                   params: { id:idParams }

            })

            接收参数：this.$route.params.id

    4.2   query 传参  :  相当于get请求，页面跳转时参数会在地址栏中显示

            this.$router.push({

                   name:'',

                   query: { id:idParams }

            })

            接收参数：this.$route.query.id

注意：传参是 router   ，  接收参数是  route