在Vue项目开发中，页面之间传递参数有很多种方法
1.路由传递
// params单个参数传递
// 设置参数 catid
this.$router.push({
name: '/article/category',
params: {catid: '10'}
})
// 获取参数 catid
this.$route.params.catid
// 多个参数传递
// 设置参数 catid
this.$router.push({
name: '/article/category',
params: {
catid: '10',
pcatid: '1',
user: {
username: 'admin',
password: '1234556'
}
})
// 获取参数 catid
this.$route.params.catid
this.$route.params.pcatid
this.$route.params.user.username
this.$route.params.user.password
this.$router.push({
path: '/article/category',
params: {catid: '10'}
})
// 获取参数 catid
this.$route.params.catid
// query多个参数传递
// 设置参数 catid
this.$router.push({
path: '/article/category',
query: {
catid: '10',
pcatid: '1',
user: {
username: 'admin',
password: '1234556'
}
})
// 获取参数 catid
this.$route.query.catid
this.$route.query.pcatid
this.$route.query.user.username
this.$route.query.user.password2.sessionStorage/localStorage缓存的形式进行传递
// 设置catid参数
window.localStorage.setItem('catid','10')
// 获取catid参数
window.localStorage.getItem('catid')
// 设置catid参数
window.sessionStorage.setItem('catid','10')
// 获取catid参数
window.sessionStorage.getItem('catid')注：
sessionStorage(会话存储)：生命周期是在仅在当前会话下有效。及只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。
localStorage(本地存储)：生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。不可跨浏览器共用。
3.父子组件之间的传值
- 父组件给子组件传值（通过props属性）
- 子组件给父组件传值（通过emit事件）
4.使用vuex进行传值
export default new Vuex.Store({
state: {
appkey: '',
infokey: ''
},
mutations: {
setAppkey(state,appkey){
state.appkey = appkey;
},
setInfokey(state,infokey){
state.infokey = infokey;
}
},
actions: {},
modules: {}
});其中 state 中为需要传递的值，mutation中为监控值变化并修改值的方法，通过store.commit（）方法来触发状态变更以及store.state来获取状态对象。
store.commit("setAppkey",response.data.HttpData.data.appkey);
store.commit("setInfokey",response.data.HttpData.data.infokey);
console.log(store.state.appkey,store.state.infokey);这里我们介绍通过路由实现页面间参数的传递
通过路由传递参数有两个缺点：
1.参数直接暴露，安全性不高；
2.参数过长时，影响地址栏美观。
但是路由传递参数这种方便比较直观，用起来也方便，可以直接把链接地址放到a标签的href中，也可以作为函数进行封装，实现页面跳转和参数传递。
路由传参的格式是：
// 传参
this.$router.push({
name:'home',
params: {
message: "",
data: {}
}
})
// 或
this.$router.push({
path:'/home',
query: {
message: "",
data: {}
}
})
// 接参
this.$route.params.message
this.$route.query.message注意：
- 传参是this.$router，接收参数是this.$route
- 由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效，接收参数页面会是undefined，需要用name来指定页面，也就是说，用query对应path（填写路径 /home），用params对应name（写路由js中对应的name，而不是路径）
- 接收数据必须在页面加载完成后，也就是在mounted接收，而不是created。
query和params的区别：
- query传值在浏览器地址栏传递数据可见，而params不可见
- query配合着push的path，params配合着push的name进行地址的跳转
实例1：直接在元素中添加跳转地址和参数
第一步：在router里面的index.js文件中设置category路由路径和参数
第二步：在header.vue里，可以使用a的href直接添加跳转地址和参数
第三步：在category.vue中接收参数
实例2：通过路由函数实现页面跳转和params参数传递
第一步：在router里面的index.js文件中设置category路由路径和参数
第二步： 在header.vue里，通过@click方法实现push函数调用
第三步：methods中编写push调用函数
第四步：在category.vue中接收参数
实例3：通过路由函数实现页面跳转和query参数传递
第一步：在router里面的index.js文件中设置category路由路径，但不设置参数
第二步： 在header.vue里，通过@click方法实现push函数调用
第三步：methods中编写push调用函数
第四步：在category.vue中接收参数
到此这篇关于Vue通过路由实现页面间参数的传递的文章就介绍到这了,更多相关vue路由实现页面参数传递内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
