脚本宝典收集整理的这篇文章主要介绍了'get'，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

关于模拟数据，这里使用Mock.js这个库，关于用法，官网说的也比较详细，这里我就简单的带一下。

列表数据

我们先将项目中src/components/HelloWorld.vue删除，将src/router/index.js作如下修改：

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/views/vacation/'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index
    }
  ]
})

然后，在src/views/vacation/建立index.vue：

<template>
  <div>list view</div>
</template>

显示效果

在手机模式下，显示效果如下：

模拟数据

在项目根目录下，使用命令行npm i -D mockjs；

新建src/mock/list.js:

import { mock, Random } from "mockjs";

export default mock({
  'list|0-50': [
    {
      'approveId': '@id',
      'applier': {
        'userId': '@guid',
        'userName': '@cname',
        'sectionId': '@id',
        'sectionName': '@ctitle',
      }
      ...
    }
  ]
})

• 这里的'@id'（称为“占位符”）是Random.id()的简写形式；
• 这里的'@id'（称为“占位符”）必须使用引号包裹；
• 这里的'@id' + 111会是将'@id'当作字符串（返回'@id111'），不等于Random.id() + 111；

新建src/mock/index.js：

Mock.js拦截请求地址：

import { mock, Random } from "mockjs";
import List from "./list";

mock('/','get',()=> List);

• 在这里，使用Mock.mock( rurl?, rtype?, function( options ) )拦截路由请求的/路径，返回模拟的List列表。

• rurl：拦截路径规则，可以是字符串'/'，也可以是一个正则表达式///。

  • 若请求/?id="1"，mock的拦截路径可以写成Mock.mock(//?id="d""/

    脚本宝典总结

    以上是脚本宝典为你收集整理的'get'全部内容，希望文章能够帮你解决'get'所遇到的问题。

    如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

    本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
    如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。