vue-参数绑定及重定向

1.参数绑定

 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

 

 完整代码：

Login.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

<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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74

<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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

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     }   ] })