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