第一种: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// 获取路由传递过来的参数