Vue03_ Router路由、ElementUI 和 Axios 的使用
安装vue-router
npm install vue-router
安装ElementUI
npm i element-ui -S
安装Axios
npm install axios
在Vue项目下创建router目录，在其中创建index.js文件：
import Vue from 'vue'
import VueRouter from 'vue-router'
//引入组件
import Content from "../components/Content";
import Main from "../components/Main";
import list from "../components/list";
import Profile from "../components/Profile";
import NotFound from "../components/NotFound";
//声明使用路由
Vue.use(VueRouter);
//配置导出路由，编写路由参数：
export default new VueRouter({
routes:[
{
path: '/content',
component: Content,
name: 'Content'
},
{
path: '/main',
component: Main,
name: 'Main',
children: [
{
path: '/user/list/:username',
component: list,
name: 'userlist',
props: true
},
{
path: '/user/profile/:id',
component: Profile,
name: 'userProfile'
},
{
path: '/goHome',
redirect: '/main'
}
]
},
{
path: '*',
component: NotFound
},
{
path: '/',
redirect: '/main'
}
]
});
在main.js中导入自定义的vue-router配置：
import Vue from 'vue'
import App from './App'
//导入自定义的router配置：
import router from "./router";
//导入ElementUI:
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
//导入Axios:
import axios from 'axios';
import VueAxios from 'vue-axios';
//声明使用ElementUI:
Vue.use(ElementUI);
//声明使用Axios
Vue.use(VueAxios,axios);
阻止vue在启动时生成生产提示：
Vue.config.productionTip = false;
new Vue({
el: '#app',
//将router挂载到Vue上：
router,
components: {
App },
template: '<App/>'
})
在public目录下创建mock目录，在mock目录中创建data.json文件：
{
"name": "BLU",
"url": "http://www.baidu.com",
"page": 1,
"address": {
"country": "China",
"city": "南京",
"street": "安德门大街"
}
}
App.vue
<template>
<div id="app">
<HelloWorld/>
<router-link to="/main">首页</router-link>
<router-link to="/content">内容页</router-link>
<router-view></router-view>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
margin-top: 60px;
}
</style>
HelloWorld.vue
<template>
<div>
<p>Hi BLU</p>
<p>{
{msg}}</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
list.vue
<template>
<div>
<h1>用户列表页</h1>
{
{username}}
</div>
</template>
<script>
export default {
props: ['username'],
name: "userlist"
}
</script>
Profile.vue
<template>
<div>
<h1>个人信息页</h1>
{
{ $route.params.id }}
</div>
</template>
<script>
export default {
name: "userProfile",
beforeRouteEnter:(to, from, next)=>{
console.log("进入路由Profile");
next(vm => {
vm.getData();
});
},
beforeRouteLeave:(to, from, next)=>{
console.log("离开路由Profile");
next();
},
methods: {
getData: function () {
this.axios({
method: 'get',
url: 'http://localhost:8080/mock/data.json'
}).then(function (response) {
console.log(response);
})
}
}
}
</script>
Main.vue
<template>
<el-container>
<el-aside width="480px">
<el-col :span="12">
<h5>默认颜色</h5>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">
<router-link :to="{name: 'userlist',params: {username: 'BLU'}}">用户列表页</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<router-link v-bind:to="{name: 'userProfile',params:{id: 1}}">个人信息页</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-menu-item-group title="分组二">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</el-col>
</el-aside>
<el-container>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
name: "Main",
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
Content.vue
<template>
<div>
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="ruleForm.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "Content",
data() {
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('年龄不能为空'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
if (value < 18) {
callback(new Error('必须年满18岁'));
} else {
callback();
}
}
}, 1000);
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
ruleForm: {
pass: '',
checkPass: '',
age: ''
},
rules: {
pass: [
{
validator: validatePass, trigger: 'blur' }
],
checkPass: [
{
validator: validatePass2, trigger: 'blur' }
],
age: [
{
validator: checkAge, trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
NotFound.vue
<template>
<div>
<h1>404：页面不存在</h1>
</div>
</template>
<script>
export default {
name: "NotFound"
}
</script>
