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>

// 使用 Mockimport 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);

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

<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>

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;