vue+element ui项目总结点（一）select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式
不多说上代码：
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>Element UI简单Cascader级联选择器使用</p>
<el-cascader :options='options' v-model="selectedOptions" @change="handleChange">
</el-cascader>
<div class="select_box">
<p>mockjs的数据Element UI的select组件做的二级联动效果</p>
<el-select v-model="shopRegoin" placeholder="请选择" @change="selectShopRegoin">
<el-option v-for="item in shopList" :key="item.type" :label="item.shop" :value="item.type">
</el-option>
</el-select>
<el-select v-model="shopName" placeholder="请选择">
<el-option v-for="item in shopNameList" :key="item.type" :label="item.shop" :value="item.type">
</el-option>
</el-select>
</div>
<!-- 去下一个页面 -->
<div class="btn_box select_box">
<el-button type="primary" @click="goNextPage">去下一个页面看看</el-button>
</div>
</div>
</template>
<script>
import { cityList } from '../netconnet/api'
export default {
name: 'HelloWorld',
data() {
return {
msg: 'hello,vuejs',
selectedOptions: [],
options: [], //级联数据
shopRegoin: '',
shopName: '',
shopList: [], //门店区域
shopNameList: [], //门店名字
}
},
created() {
this.getList()
this.getMockData()
this.postMockData()
},
methods: {
//es6写法
async getList() {
try {
let res = await cityList(null)
console.log(res)
this.$eleMessage('数据成功返回', 'success', 500)
} catch (e) {
console.log(e)
}
//原始写法
// cityList(null).then(res=>{
// console.log(res,'res')
// }).catch(err=>{
// console.log(err,'err')
// })
},
//change事件
selectShopRegoin(val) {
console.log(val, 'val')
let vIndex = this.shopList.findIndex(e => {
return e.type == val
})
this.shopNameList = this.shopList[vIndex].shopNameList; //二级联动的数组;
this.shopName = this.shopNameList[0].type;
console.log(this.shopNameList, 'this.shopNameList')
},
//模拟mock get请求
getMockData() {
this.$http.get('/getshop/list').then(res => {
this.shopList = res.data.data.shopList;
console.log(res, 'getMock数据')
this.$eleMessage('get的mock数据成功返回', 'success', 1500)
})
},
//模拟mock post请求
postMockData() {
let data = {
type: 'see',
key: '123456789'
}
this.$http.post('/postshop/list', data).then(res => {
// 级联选择
this.options = res.data.data.shopList.map(e => {
return {
value: e.type,
label: e.shop,
children: e.shopNameList.map(i => {
return {
value: i.type,
label: i.shop
}
})
}
})
console.log(res.data, 'postMock数据')
this.$eleMessage('post的mock数据成功返回', 'success', 3000)
})
},
handleChange(val) {
console.log(val, '值');
},
//vue 跳转
goNextPage() {
//1.push方式可以产生历史记录
this.$router.push({
name: 'test',
query: {
age: 20,
sex: '男',
goodName: encodeURI(encodeURI('中文参数转码套两层encodeURI,同理解码decodeURI也套两层'))
}
})
//2.用replace的方式不会产生历史记录
// this.$router.replace({
// name:'test',
// query:{
// age:20,
// sex:'男',
// goodName:encodeURI(encodeURI('中文参数转码套两层encodeURI'))
// }
// })
}
}
}
</script>
<style scoped>
.select_box {
margin-top: 30px;
}
</style>
2.mockjs使用方法 npm/cnpm install mockjs -S 具体参照官网（我这里给出的是快捷使用快捷配置方法）新建一个文件夹mock新建一个mockjs文件如下：
// 使用 Mock
import Mock from 'mockjs';
// 配置 Mock 路径
require.config({
paths: {
mock: 'http://mockjs.com/dist/mock'
}
})
// mock一组数据
const shopData = {
"code": 0,
"data": {
"mockObj":{
"tip":'hello,我教你手把手玩mockjs',
"date":'2018-11-30'
},
"shopList": [{
"type": 1,
"shopNameList": [{
"type": 1,
"shopNameList": [],
"shop": "母婴店1"
},
{
"type": 2,
"shopNameList": [],
"shop": "母婴店2"
},
{
"type": 3,
"shopNameList": [],
"shop": "母婴店3"
},
{
"type": 4,
"shopNameList": [],
"shop": "母婴店4"
},
{
"type": 5,
"shopNameList": [],
"shop": "母婴店5"
},
{
"type": 6,
"shopNameList": [],
"shop": "母婴店6"
},
{
"type": 7,
"shopNameList": [],
"shop": "母婴店7"
},
{
"type": 8,
"shopNameList": [],
"shop": "母婴店8"
},
{
"type": 9,
"shopNameList": [],
"shop": "母婴店9"
},
],
"shop": "南山分店"
},
{
"type": 2,
"shopNameList": [{
"type": 10,
"shopNameList": [],
"shop": "烧烤店1"
},
{
"type": 11,
"shopNameList": [],
"shop": "烧烤店2"
},
{
"type": 12,
"shopNameList": [],
"shop": "烧烤店3"
},
{
"type": 13,
"shopNameList": [],
"shop": "烧烤店4"
}
],
"shop": "宝安分店"
},
{
"type": 3,
"shopNameList": [{
"type": 14,
"shopNameList": [],
"shop": "酒店1"
},
{
"type": 15,
"shopNameList": [],
"shop": "酒店2"
}
],
"shop": "罗湖分店"
},
{
"type": 4,
"shopNameList": [{
"type": 16,
"shopNameList": [],
"shop": "按摩店1"
},{
"type": 17,
"shopNameList": [],
"shop": "按摩店2"
}],
"shop": "福田分店"
}
]
},
"msg": "请求成功"
}
// Mock.mock( url, post/get , 返回的数据)；此处可以模拟post和get 请求
Mock.mock('/postshop/list', 'post', shopData);
Mock.mock('/getshop/list', 'get', shopData);
3.mainjs如下：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
Vue.prototype.$http = axios;
require('./mock/mock.js')
Vue.use(ElementUI);
//element Message全局配置组件调用 this.$eleMessage('内容','消息类型','持续时间')
Vue.prototype.$eleMessage = function (msg,tip,time) {
this.$message({
message: msg,
type: tip,
duration:time
})
}
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
//store,
render: h => h(App)
})
4.接受路由编码后的参数并解码：
<template>
<div class="test_box">
<p>hell,你好</p>
<p>encodeURI编码后转码的路由参数内容----<span style="color: red">({{routerParmas}})</span></p>
</div>
</template>
<script>
export default {
data() {
return {
routerParmas:decodeURI(decodeURI(this.$route.query.goodName)),
}
},
created(){
},
methods:{
}
}
</script>
5.路由懒加载三种方式：
import Vue from 'vue'
import Router from 'vue-router'
//方式一：最简单直接的使用组件
//import HelloWorld from '@/components/HelloWorld'
//import Test from '@/components/test'
//方式二：webpack自带的模块按需加载 r就是resolve
//const HelloWorld = r => require.ensure([], () => r(require('@/components/HelloWorld')), 'HelloWorld');
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: resolve => require(['@/components/HelloWorld'], resolve)//方式三：懒加载方式
},{
path: '/test',
name: 'test',
component: resolve => require(['@/components/test'], resolve)
}
]
})
export default router;
