Vue中用this.$router传递参数与取值

第一种方式传递参数this.$router.push({path: ' 路由 ', query: {key: value}})参数取值this.$route.query.key传递参数<!--* @Descripttion: 登录页面* @version:* @Author: zhangfan* @email: 2207044692@qq.com* @Date: 2020-07-25 14:

辣条小哥哥

6170人浏览 · 2020-08-06 11:01:17

辣条小哥哥 · 2020-08-06 11:01:17 发布

第一种方式

传递参数 this.$router.push({path: ' 路由 ', query: {key: value}})
参数取值 this.$route.query.key

在这里插入图片描述
传递参数

<!--
 * @Descripttion: 登录页面
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-07-25 14:47:13
 * @LastEditors: zhangfan
 * @LastEditTime: 2020-08-06 10:26:13
--> 
<template>
  <div class="login">
    <div class="login-con">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>欢迎登录</span>
        </div>
        <div class="login-box">
          <el-form ref="loginForm" :rules="rules" :model="ruleForm" label-width="0px">
            <el-form-item prop="userName" label-width="0px">
              <el-input
                v-model="ruleForm.userName"
                placeholder="企业账号/业主账号"
                prefix-icon="iconfont iconzhanghao"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                prefix-icon="iconfont iconmima"
                clearable
                placeholder="输入登录密码"
                v-model="ruleForm.password"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item class="clearfix checked" prop="checked">
              <el-checkbox v-model="ruleForm.checked">保存登录</el-checkbox>
              <div class="findPassword fr">
                <el-link @click="skipPassword" :underline="false">忘记密码？</el-link>
              </div>
            </el-form-item>
            <div class="login-btn">
              <el-button
                type="primary"
                class="submitBtnBox"
                @click="handleSubmit()"
                :loading="canLogin"
              >登录</el-button>
            </div>
          </el-form>
        </div>
        <p class="login-tip">输入任意用户名和密码即可</p>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      canLogin: false,
      ruleForm: {
        userName: "",
        password: "",
        checked: "",
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.getCookie();
  },
  methods: {
    /**
     * @description: 跳转到找回密码页面
     */
    skipPassword() {},
    /**
     * @description: 调用接口登录
     */
    handleSubmit() {
      const vm = this;
      vm.$refs.loginForm.validate((valid) => {
        if (valid) {
          vm.canLogin = true;
          this.$router.push({ path: "/home", query: { userName: vm.ruleForm.userName } });
          //判断复选框是否被勾选 勾选则调用配置cookie方法
          if (vm.ruleForm.checked == true) {
            //传入账号名，密码，和保存天数3个参数
            this.$Cookies.set("userName", vm.ruleForm.userName, { expires: 7 });
            this.$Cookies.set("password", vm.ruleForm.password, { expires: 7 });
          }
        }
      });
    },
    getCookie() {
      const vm = this;
      if (document.cookie.length > 0) {
        vm.ruleForm.userName = vm.$Cookies.get("userName");
        vm.ruleForm.password = vm.$Cookies.get("password");
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "./login.less";
</style>

参数取值

<!--
 * @Descripttion: 
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-07-25 16:13:33
 * @LastEditors: zhangfan
 * @LastEditTime: 2020-08-06 10:28:20
--> 
<template>
  <div>
    <div class="canvasBox">
     欢迎你，{{userName}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      userName: ""
    }
  },
  mounted () {
      this.userName = this.$route.query.userName
  },
  methods: {
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>

第二种方式
传递参数 this.$router.push({name: ' 路由的name ', params: {key: value}})
参数取值 this.$route.params.key

传递参数

<!--
 * @Descripttion: 登录页面
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-07-25 14:47:13
 * @LastEditors: zhangfan
 * @LastEditTime: 2020-08-06 10:55:44
--> 
<template>
  <div class="login">
    <div class="login-con">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>欢迎登录</span>
        </div>
        <div class="login-box">
          <el-form ref="loginForm" :rules="rules" :model="ruleForm" label-width="0px">
            <el-form-item prop="userName" label-width="0px">
              <el-input
                v-model="ruleForm.userName"
                placeholder="企业账号/业主账号"
                prefix-icon="iconfont iconzhanghao"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                prefix-icon="iconfont iconmima"
                clearable
                placeholder="输入登录密码"
                v-model="ruleForm.password"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item class="clearfix checked" prop="checked">
              <el-checkbox v-model="ruleForm.checked">保存登录</el-checkbox>
              <div class="findPassword fr">
                <el-link @click="skipPassword" :underline="false">忘记密码？</el-link>
              </div>
            </el-form-item>
            <div class="login-btn">
              <el-button
                type="primary"
                class="submitBtnBox"
                @click="handleSubmit()"
                :loading="canLogin"
              >登录</el-button>
            </div>
          </el-form>
        </div>
        <p class="login-tip">输入任意用户名和密码即可</p>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      canLogin: false,
      ruleForm: {
        userName: "",
        password: "",
        checked: "",
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.getCookie();
  },
  methods: {
    /**
     * @description: 跳转到找回密码页面
     */
    skipPassword() {},
    /**
     * @description: 调用接口登录
     */
    handleSubmit() {
      const vm = this;
      vm.$refs.loginForm.validate((valid) => {
        if (valid) {
          vm.canLogin = true;
          this.$router.push({ name: "home", params: { userName: vm.ruleForm.userName } });
          //判断复选框是否被勾选 勾选则调用配置cookie方法
          if (vm.ruleForm.checked == true) {
            //传入账号名，密码，和保存天数3个参数
            this.$Cookies.set("userName", vm.ruleForm.userName, { expires: 7 });
            this.$Cookies.set("password", vm.ruleForm.password, { expires: 7 });
          }
        }
      });
    },
    getCookie() {
      const vm = this;
      if (document.cookie.length > 0) {
        vm.ruleForm.userName = vm.$Cookies.get("userName");
        vm.ruleForm.password = vm.$Cookies.get("password");
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "./login.less";
</style>

参数取值

<!--
 * @Descripttion: 
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-07-25 16:13:33
 * @LastEditors: zhangfan
 * @LastEditTime: 2020-08-06 10:56:09
--> 
<template>
  <div>
    <div class="canvasBox">
     欢迎你，{{userName}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      userName: ""
    }
  },
  mounted () {
      this.userName = this.$route.params.userName
  },
  methods: {
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>

使用这种方式，参数不会拼接在路由后面，地址栏上看不到参数

由于动态路由也是传递params的，所以在 this.$router.push() 方法中 path不能和params一起使用，否则params将无效。需要用name来指定页面。及通过路由配置的name属性访问

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^