vue-router(vue路由)跳转及传递参数的方式

在做项目的时候需要从A页面跳转到B页面，并进行参数传递，于是查询官网了解到，vue路由跳转
主要有两种方式：一是，使用编程式的导航；二是：使用router-link。

由于项目中跳转时，有个axios请求，所以这里主要讲解使用编程式的导航

第一种是使用编程式的导航
使用编程的导航主要借助 router.push(location, onComplete?, onAbort?)
注意：在 Vue 实例内部，你可以通过 router.push。

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击 时，这个方法会在内部调用，所以说，点击 等同于调用 router.push(…)
对于router.push方法来说，有两种方式（注意二者的区别），一种是通过params；一种是query。
下面就二者区别进行讲解，前者需要对跳转路由进行命名，使用
this.router.push({path: '准去的路由地址'}，query:{'参数'：'参数Value'})

通过params：
直接上代码：
A页面（这里简化代码），包含一个axios请求，并传递参数
对跳转页面进行命名:

{path: '/App/AAA',name:'BBB',component:FootholdAnalysis},

data() {
            return {
                imageUrl: require("../../static/tianjia.png"),
                dateValue1: "2018-09-08",
                dateValue2: "2018-09-10",
                features: undefined,
            }
},  
methods: {
     handleClick(row){
                var me=this;
                var features;          
                this.axios.get(
                    'personnelface/common/AAA?face_img_url='+row.face_img_url)
                    .then(function(response){
                    if(response.data.code==0){                     
                        features=response.data.msg.feature; 
                        me.$router.push({ name: 'BBB', 
                        params:{ 
                        imageUrl:row.face_img_url, 
                        dateValue1: me.dateValue1,      
                        dateValue2:me.dateValue2,
                        features:features}
                        });                                                              
                    }
                })
                .catch(function (error) {
                        console.log(error);
                    });                             
            }
}       

B页面用于接收参数，并使用，最好创建B页面接收参数，写到created()方法内

 data() {
            return {
                imageUrl: require("../../static/tianjia2.png"),
                dateValue3: "2018-09-02",
                dateValue4: "2018-09-28",
                features:undefined,
                }
},
created() {         
            if(this.$route.params.imageUrl){
                //这里就可以接收参数，进行全局修改其他方法可以通过如this.dateValue3获取即可
                this.dateValue3=this.$route.params.dateValue1;
                this.dateValue4=this.$route.params.dateValue2;
                this.imageUrl=this.$route.params.imageUrl;
                this.features=this.$route.params.features;
            }
        },          

通过query：
该方法与params方法的不同点在于使用准确的路由地址，通过query去获取参数。
A页面（传递参数）

data() {
            return {
                imageUrl: require("../../static/tianjia.png"),
                dateValue1: "2018-09-08",
                dateValue2: "2018-09-10",
                features: undefined,
            }
},  
methods: {
     handleClick(row){
                var me=this;
                var features;          
                this.axios.get(
                    'personnelface/common/AAA?face_img_url='+row.face_img_url)
                    .then(function(response){
                    if(response.data.code==0){                     
                        features=response.data.msg.feature; 
                        me.$router.push({ path:'/App/AAA', 
                        query:{ 
                        imageUrl:row.face_img_url, 
                        dateValue1: me.dateValue1,      
                        dateValue2:me.dateValue2,
                        features:features}
                        });                                                              
                    }
                })
                .catch(function (error) {
                        console.log(error);
                    });                             
            }
}       

B页面（接收参数）

data() {
            return {
                imageUrl: require("../../static/tianjia2.png"),
                dateValue3: "2018-09-02",
                dateValue4: "2018-09-28",
                features:undefined,
                }
},
created() {         
            if(this.$route.query.imageUrl){
                //这里就可以接收参数，进行全局修改其他方法可以通过如this.dateValue3获取即可
                this.dateValue3=this.$route.query.dateValue1;
                this.dateValue4=this.$route.query.dateValue2;
                this.imageUrl=this.$route.query.imageUrl;
                this.features=this.$route.query.features;
            }
        },      

第二种是使用router-link

router-link 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的<a>标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。

router-link比起写死的 <a href="..."> 会好一些，理由如下：

无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致，所以，当你要切换路由模式，或者在 IE9 降级使用 hash 模式，无须作任何变动。
在 HTML5 history 模式下，router-link 会守卫点击事件，让浏览器不再重新加载页面。
当你在 HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写 (基路径) 了

转自https://blog.csdn.net/qq_36727756/article/details/90450891