在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.password

2.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.父子组件之间的传值

1. 父组件给子组件传值（通过props属性）

2. 子组件给父组件传值（通过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中接收参数