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;