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

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

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

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