router返回上一页传惨 vue_vue-router参数传递

第一种：get方法

传值：

get跳转

//或

get跳转

接收值：

//在get.vue文件中

get跳转页

userId:{{userId}}

username:{{username}}

data(){return{//接收值：

userId:this.$route.query.userId,

username:this.$route.query.username,

}

}

}

结果：url上显示参数，页面刷新后参数不会消失；

第二种：post方法

传值：

post跳转

//路由path带着路由参数params时,params不生效，错误示范：

post跳转

接收值：

post页面

studentId:{{stuId}}

studentName:{{stuName}}

data(){return{//接收值：

stuId:this.$route.params.stuId,

stuName:this.$route.params.stuName,

}

}

}

结果：url上不显示参数，页面刷新后参数会消失；

第三种：路由方法

传值：

路由跳转

接收值：

路由传值

rouId:{{rouId}}

rouName:{{rouName}}

data(){return{

rouId:this.$route.params.rouId,

rouName:this.$route.params.rouName,

}

}

}

结果：url上显示参数，页面刷新后参数不会消失；

注意：

(1)

上文中router-link中的path和name都是路由里面的，页面创建成功后一定要配置页面的路由；

上文中第三种方法，还在路由中也进行了相应的配置；

路由中的配置：

import Vue from 'vue'import Router from'vue-router'import HelloWorld from'@/components/HelloWorld'Vue.use(Router)

exportdefault newRouter({

routes: [

{

path:'/',

name:'HelloWorld',

component: HelloWorld

},

{

path:'/get',

name:'get',

component: resolve=> require(['../components/get.vue'], resolve),

meta: {

title:'get'},

},

{

path:'/post',

name:'post',

component: resolve=> require(['../components/post.vue'], resolve),

meta: {

title:'post'},

},

{

path:'/route/:rouId/:rouName?'name:'route',

component: resolve=> require(['../components/route.vue'], resolve),

meta: {

title:'route'},

}

]

})

(2)

当在链接上设置replace属性，点击时，会调用router.replace()而不是router.push()，于是浏览器不会留下history记录，也就是无法返回上一页，但会进入上上页；

(3)

在组件中获取参数：

{{$route.params.userId}}

{{$route.params.userName}}

简单说明router和route的区别：

$router ：是指整个路由实例,你可以操控整个路由，用法如下：

this.$router.go(-1); // 向前或者向后跳转n个页面，n可为正整数或负整数

this.$router.push('/'); // 跳转到指定url路径，history栈中会有记录，点击返回会跳转到上个页面

this.$router.replace('/'); // 跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面

$route：是指当前路由实例$router跳转到的路由对象；路由实例可以包含多个路由对象，它们是**父子包含关系**.

this.$route.params.userId// 获取路由传递过来的参数

this.$route.query.userName// 获取路由传递过来的参数