不多說上程式碼：

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