vue-参数绑定及重定向

Z时代
2024-01-10
分类：综合

vue

1.1 要实现这样的效果

点击个人信息，传递参数

或者直接在url中：

1.2 实现步骤

（1）在主页面，main.vue中

（2）在router/index.js中path要加上参数

（3）在Profile.vue中展示参数

1.3 第二种参数绑定的方法：使用props解耦

router/index.js

props:true代表可以用props的方式传递参数

Profile.vue

Main.vue中不用改

1.4 出现的两个bug

（1）template下只能有一个元素，即template下一级只能有一个标签，只能有一个根标签

这样写就会报错：

解决办法：

加一个div标签

（2）传递参数，name对应的要是组件名

2.重定向

在router/index.js中

3.登录界面携带用户信息

（1）在提交跳转方法中添加username参数，Login.vue

（2）在router/index.js中

（3）获取传递过来的参数，Main.vue

完整代码：

<template>
  <div>
    <el-form :model="form" :rules="rules" ref="loginForm" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'Login',
    data() {
      return {
        form: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            { required: true, message: '账号不可为空', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '密码不可为空', trigger: 'blur' },
          ],
        },
        dialogVisible: false
      };
    },
    methods: {
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$router.push("/main/"+this.form.username);
          } else {
            this.dialogVisible = true;
            return false;
          }
        });
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>
<style scoped>
</style>

　　Main.vue

<template>
    <div>
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1']">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-caret-right"></i>
                <span>用户管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1">
                  <router-link :to="{name:'UserProfile', params: {id: 1}}">个人信息</router-link>
                </el-menu-item>
                <el-menu-item index="1-2">
                  <router-link to="/user/list">用户列表</router-link>
                </el-menu-item>
                <el-menu-item index="1-3">
                  <router-link to="/goHome">回到首页</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-caret-right"></i>
                <span>内容管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="2-1">分类管理</el-menu-item>
                <el-menu-item index="2-2">内容列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-container>
          <el-header style="text-align: right; font-size: 12px">
            <el-dropdown>
              <i class="el-icon-setting" style="margin-right: 15px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span>
              {{name}}
            </span>
          </el-header>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>
<script>
    export default {
      name: "Main",
      props: ['name']
    }
</script>
<style scoped>
  .el-header {
    background-color: #2acaff;
    color: #333333;
    line-height: 60px;
  }
  .el-aside {
    color: #333333;
  }
</style>

　　router/index.js

import Vue from 'vue'
import Router from "vue-router"
import Main from "../views/Main";
import Login from "../views/Login";
import UserList from '../views/user/List'
import UserProfile from '../views/user/Profile'
Vue.use(Router)
export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/main/:name',
      name: 'main',
      component: Main,
      props: true,
      //嵌套路由
      children: [
        {
          path: '/user/list',
          component: UserList,
        },
        {
          path: '/user/profile/:id',
          name: 'UserProfile',
          props: true,
          component: UserProfile,
        }
      ]
    },
    {
      path: '/goHome',
      redirect: '/main'
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    }
  ]
})