创建工程
注意:命令行都要使用管理员模式运行
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>
- 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 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>
传递参数(username传递)
Login.vue
index.js
Main.vue
重定向
index.jsp
2.Main.vue