创建项目
vue init webpack vue-elementui
# 进入项目目录
cd vue-elementui
# 安装 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
npm命令解释
npm install moduleName
安装模块到项目目录下npm install moduleName -g
安装模块到全局目录npm install moduleName --save
安装模块到项目目录下,并在package
文件的dependencies
节点写入依赖,-S
为简写npm install moduleName --save-dev
安装模块到项目目录下,并在package
文件的devDependencies
节点写入依赖,-D
为简写
编写代码
新建包views
里面存放vue的视图组件,并创建vue组件
Main.vue
<template>
<h1>首页</h1>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>
Login.vue
<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 Vue from 'vue'
import App from './App'
import router from './router'
// 导入饿了么依赖和css
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false;
Vue.use(router);
Vue.use(ElementUI);
new Vue({
el: '#app',
router,
// 使用elementUI
render: h => h(App)
});
App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
路由嵌套
在views
下新建包user
List.vue
<template>
<h1>用户列表</h1>
</template>
<script>
export default {
name: "List"
}
</script>
<style scoped>
</style>
Profile.vue
<template>
<h1>个人信息</h1>
</template>
<script>
export default {
name: "UserProfile"
}
</script>
<style scoped>
</style>
修改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 {
name: "Main"
};
</script>
index.js添加子路由
import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'
import UserProfile from '../views/user/Profile'
import UserList from '../views/user/List'
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
}
]
})
路由传递参数
实现一 $route
修改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">
<!--路由参数传递 需要对象{} 使用v-bind绑定 简写:
name: 组件名
params: 参数列表
-->
<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-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 {
name: "Main"
};
</script>
修改index.js
import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'
import UserProfile from '../views/user/Profile'
import UserList from '../views/user/List'
Vue.use(Router);
export default new Router({
routes: [
{
path: '/main',
component: Main,
// 子路由
children: [
{
// :id传递的参数 和router-link传递的params中的参数对应
path: '/user/profile/:id',
name: 'UserProfile',
component: UserProfile},
{
path: '/user/list',
name: 'UserList',
component: UserList}
]
},{
path: '/login',
component: Login
}
]
})
在Profile.vue
中添加代码,显示参数
<template>
<div>
<h1>个人信息</h1>
<!--不能直接写在根节点下,要在标签中显示-->
{{ $route.params.id }}
</div>
</template>
<script>
export default {
name: "UserProfile"
}
</script>
<style scoped>
</style>
实现二 prors
在组件中使用 $route
会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。
使用 props
将组件和路由解耦:
Main.vue
<router-link :to="{name: 'UserProfile',params: {id: 1}}">个人信息</router-link>
index.js
import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'
import UserProfile from '../views/user/Profile'
import UserList from '../views/user/List'
Vue.use(Router);
export default new Router({
routes: [
{
path: '/main',
component: Main,
// 子路由
children: [
{
// :id传递的参数 和router-link传递的params中的参数对应
path: '/user/profile/:id',
name: 'UserProfile',
component: UserProfile,
// 添加props为true,并在组件中为props的属性添加所传参数
props: true
},
{
path: '/user/list',
name: 'UserList',
component: UserList}
]
},{
path: '/login',
component: Login
}
]
})
Profile.vue
<template>
<div>
<h1>个人信息</h1>
<!--不能直接写在根节点下,要在标签中显示-->
{{ id }}
</div>
</template>
<script>
export default {
// 在props中设置路由的参数
props: ['id'],
name: "UserProfile"
}
</script>
<style scoped>
</style>
传递登录页的账户名
修改 Login.vue
中 methods
的方法
// 路由到主页并传递参数
this.$router.push("/main/"+this.form.username);
修改 index.js
// 接收参数 name
path: '/main/:name',
props: true,
在 Main.vue 添加代码,显示用户名
<template>
...
<span>{{ name }}</span>
...
</template>
<script>
export default {
props: ['name'],
name: "Main"
};
</script>
路由重定向
index.js 添加路由路径
{
path: '/goHome',
// 重定向到 /main
redirect: '/main'
}
Main.vue 添加代码
<el-menu-item index="1-3">
<!--重定向-->
<router-link to="/goHome">回到首页</router-link>
</el-menu-item>