Vue：elementUi-参数传递，重定向

最新推荐文章于 2024-08-26 11:09:22 发布

原创最新推荐文章于 2024-08-26 11:09:22 发布 · 715 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

vue 专栏收录该内容

11 篇文章

订阅专栏

本文档介绍了如何使用Vue.js、Vue Router、Element-UI搭建一个包含用户登录、用户列表和个人信息展示的Web应用。首先通过vue init webpack命令创建工程，然后安装相关依赖如vue-router、element-ui、SASS加载器。接着，创建Main.vue和Login.vue组件，并实现路由配置。在Main.vue中，利用Element-UI的菜单组件实现用户管理和内容管理的侧边栏，通过路由嵌套展示UserList和UserProfile组件。同时，展示了如何进行参数传递和页面重定向。整个过程详细阐述了Vue.js项目的基本结构和组件化开发思路。

创建工程

注意：命令行都要使用管理员模式运行

1.创建名为hello-vue工程

vue init webpack hello-vue

2.安装依赖
#进入工程

cd hello-vue

#安装 vue-router

npm install vue-router --save-dev

#安装element-ui

npm i element-ui -S

#安装依赖

npm install

#安装 SASS 加载器

cnpm install sass-loader node-sass --save-dev

#启动测试

npm run dev

搭建环境

在这里插入图片描述

Main.vue

<template>
  <h1>首页</h1>
</template>

<script>
  export default {
    name: "Main"
  }
</script>

<style scoped>

</style>

<template>
  <div>
    <!--el-form一个表单，两个输入框-->
    <el-form ref="loginForm" :model="form" :rules="rules"  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-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <!--登陆按钮绑定了一个onSubmit事件-->
        <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){
            /*如果引用成功了，会去router中push到main，这种方式称为编程式导航*/
            this.$router.push("/main");

          }else {
            this.dialogVisible=true;
            return false;

          }
        });
      }
    }
  }
</script>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Main from "../views/Main";
import Login from "../views/Login";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/main',
      component: Main

    },{
      path: '/login',
      component: Login
    }
  ]
})

main.js

import ElementUI from 'element-ui';
/*需要加SASS*/
import 'element-ui/lib/theme-chalk/index.css';
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

Vue.use(router)
Vue.use(ElementUI);

new Vue({
  el: '#app',
  router,
    /*给谁渲染*/
  render: h => h(App),

})

App.vue

<template>
  <div id="app">
    <h1>测试</h1>
    <router-link to="/login">login</router-link>
    <router-link to="/main">main</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>

路由嵌套

在这里插入图片描述
对于组件来说只是对局部的改变

主要流程

创建两个组件
路由注册两个组件
首页通过路径点击事件通过路由找到组件，将- 组件渲染上去

List.vue

<template>
    <h1>用户列表</h1>
</template>

<script>
    export default {
        name: "UserList"
    }
</script>

<style scoped>

</style>

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({
  routes: [
    {
      path: '/main',
      component: Main,
      children:[
        {
          path:"/user/profile",
          component:UserProfile
        },{
          path:"/user/list",
          component:UserList
        }
      ]
    },{
      path: '/login',
      component: Login
    }
  ]
})

Main.vue

<template>
  <el-container style="height: 500px; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1', '3']">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-message"></i>用户管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1">
              <router-link to="/user/profile">个人信息</router-link>
            </el-menu-item>
            <el-menu-item index="1-2">
              <router-link to="/user/list">用户列表</router-link>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>内容管理
          </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>
      </el-header>

      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<style>
  .el-header {
    background-color: #b3c0d1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>

<script>
  export default {
    data() {
      const item = {
        date: "2016-05-02",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1518 弄"
      };
      return {
        tableData: Array(20).fill(item)
      };
    }
  };
</script>

个人信息绑定了/user/profile，就会通过路由找到/main路径下的/user/profile对应的组件

<el-menu-item index="1-1">
  <router-link to="/user/profile">个人信息</router-link>
</el-menu-item>

{
  path: '/main',
  component: Main,
  children:[
    {
      path:"/user/profile",
      component:UserProfile
    },{
      path:"/user/list",
      component:UserList
    }
  ]
}

参数传递与重定向

大坑:template下只能有一个标签！！！ ## 参数传递（id传递） ### 方式一

1.绑定：Main.vue
在这里插入图片描述

2.接收 index.js

3.展示 Profile.vue

方式二

1.传递参数 index.js
在这里插入图片描述
2…绑定：Main.vue

3.Profile.vue

<template>

  <div>
    <h1>用户信息</h1>
    {{id}}
  </div>

</template>

<script>
export default {
  props:['id'],
  name: "Profile"
}
</script>

<style scoped>

</style>