首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue路由实现页面参数传递

Vue通过路由实现页面间参数的传递

2023-04-21 15:44:48 作者：Tango糖果π

这篇文章主要介绍了Vue通过路由实现页面间参数的传递,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

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

父组件给子组件传值（通过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。