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

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

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

第一种是使用编程式的导航

使用编程的导航主要借助 router.push(location, onComplete?, onAbort?)
注意:在 Vue 实例内部,你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

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

当你点击 时,这个方法会在内部调用,所以说,点击 等同于调用 router.push(…)
对于router.push方法来说,有两种方式(注意二者的区别),一种是通过params;一种是query
下面就二者区别进行讲解,前者需要对跳转路由进行命名,使用
this.$router.push({name:'跳转路由'},params:{'参数':'参数Value'})
后者不需要命名直接通过准确的路由地址即可
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

vue-router(vue路由)跳转及传递参数的方式_第1张图片
router-link 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址,默认渲染成带有正确链接的标签,可以通过配置 tag 属性生成别的标签.。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名。

router-link比起写死的 会好一些,理由如下:

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

你可能感兴趣的:(Vue)