第97天学习打卡（Vue vue-router 嵌套路由 参数传递 重定向 路由模式与404 路由钩子与异步请求）

Vue: vue-router路由

测试

1.先删除没有用的东西

2.components目录下存放我们自己编写的组件

3.定义一个Content.vue的组件

<template>
<h1>内容页</h1>
</template>

<script>
export default {
  name: "Content"
}
</script>

<style scoped>

</style>

4.安装路由，在src目录下，新建一个文件夹：router,专门存放路由

import Vue from 'vue'
//导入路由插件
import VueRouter from "vue-router";
//导入上面定义的组件
import Content from "../components/Content";
import Main from "../components/Main";
//安装路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  routes:[
    {
      //路由路径
      path:'/content',
      name:'content',

      //跳转的组件
      component: Content
    },
    {
      //路由路径
      path:'/main',
        //路由名称
      name:'main',

      //跳转的组件
      component: Main
    }
  ]
});

5.在main.js中配置路由

import Vue from 'vue'
import App from './App'
import router from './router' //自动扫描里面的路由配置
//来关闭生产模式下给出的提示
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  //配置路由  然后由index里面去配
  router,
  components: { App },
  template: '<App/>'
})

6.App.vue中使用路由

<template>
  <div id="app">
    <h1>Vue-Router</h1>
<!--  router-link:控制路由  router-view：控制页面展示  -->
<router-link to="/main">首页</router-link>
<router-link to="/content">内容页</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'


}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Vue: 实战快速上手

创建工程

注意： 命令行都要使用管理员模式运行

1.创建一个名为hello-vue的工程 vue init webpack hello-vue

2.安装依赖，我们需要安装vue-router、element-ui、sass-loader和node-sass四个插件。

# 进入工程目录
cd hello-vue
# 安装 vue-router
npm install vue-router --save-dev
#安装 element-ui -s
npm i element-ui -s
# 安装依赖
npm install
# 安装SASS加载器
cnpm install sass-loader node-sass --save-dev
# 启动测试
npm run dev

3.npm命令解释：

• npm install moduleName:安装模块到项目目录下
• npm install -g moduleName: -g的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看npm config prefix是位置。
• npm install -save moduleName: --save的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖， -S为该命令的缩写
• npm install -save-dev moduleName: --save-dev的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写。

操作流程的图片展示：

views

Login.vue

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      form: {
        username: '',
        password: ''
      },

      // 表单验证，需要在 el-form-item 元素中增加 prop 属性
      rules: {
        username: [
          {required: true, message: '账号不可为空', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '密码不可为空', trigger: 'blur'}
        ]
      },

      // 对话框显示和隐藏
      dialogVisible: false
    }
  },
  methods: {
    onSubmit(formName) {
      // 为表单绑定验证功能
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
          this.$router.push("/main");
        } else {
          this.dialogVisible = true;
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.login-box {
  border: 1px solid #DCDFE6;
  width: 350px;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
}

.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: #303133;
}
</style>

Main.vue

<template>
<h1>首页</h1>
</template>

<script>
export default {
  name: "Main"
}
</script>

<style scoped>

</style>

App.vue

<template>
  <div id="app">

<router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'App'
}
</script>

main.js

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';
//把路由配到main.js里面   一般用大写表示组件

Vue.use(router);
Vue.use(ElementUI);


new Vue({
  el: '#app',
  router,
  render: h => h(App)  //ElementUI 配的
});

router

index.js

import Vue from 'vue'
import Router from 'vue-router'

import Main from '../views/Main'
import Login from '../views/Login'
Vue.use(Router);

export default new Router({
  routes:[
    {
      path:'/main',
      component:Main
    },
    {
      path:'/login',
      component:Login
    }
  ]
})

运行出现这些错误时要降低版本 ：docifyModule build failed: Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

TypeError: this.getOptions is not a function

然后按照下面的操作进行：这个是在IDEA的Terminal中运行的

嵌套路由

嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成、同样的,URL中各段动态路径也按某种结构对应嵌套的各层组件，例如：

Main.vue

<template>
  <div>
    <el-container>
      <el-aside width="200px">

        <el-menu :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <!--插入的地方-->
                <router-link to="/user/profile">个人信息</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <!--插入的地方-->
                <router-link to="/user/list">用户列表</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
            <el-menu-item-group>
              <el-menu-item index="2-1">分类管理</el-menu-item>
              <el-menu-item index="2-2">内容列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title"><i class="el-icon-caret-right"></i>系统管理</template>
            <el-menu-item-group>
              <el-menu-item index="3-1">用户设置</el-menu-item>
              <el-menu-item index="3-2">用户修改</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
<!--        顶部栏-->
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>

        <el-main>
          <!--在这里展示视图-->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  name: "Main"
}
</script>
<style scoped lang="scss">
.el-header {
  background-color: #2e78db;
  color: #5f0f0f;
  line-height: 60px;
}
.el-aside {
  color: #6f1313;
}
</style>

views user

List.vue

<template>
  <h1>用户列表</h1>
</template>

<script>
export default {
  //这里的name 不一定要和创建的一致  只是改了之后调用改的名字而已
  name: "UserList"
}
</script>

<style scoped>

</style>

Profile.vue

<template>
<h1>个人信息页</h1>
</template>

<script>
export default {
  //这里的name 不一定要和创建的一致  只是改了之后调用改的名字而已
  name: "UserProfile"
}
</script>

<style scoped>

</style>

index.js

import Vue from "vue";
import Router from "vue-router";
import Main from "../views/Main";
import Login from "../views/Login";
import UserList from "../views/user/List";
import UserProfile from "../views/user/Profile";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/main',
      component: Main,
      //路由嵌套
      children: [
        {path: '/user/profile',component: UserProfile},
        {path: '/user/list',component: UserList}
      ]
    },
    {
      path: '/login',
      component: Login
    }
  ]
});

参数传递：

Main.vue

 <el-menu-item index="1-1">
                <!--name:传组件名 通过params去传参  需要通过v-bind去绑定   传参数需要对象 用v-bind绑定  简写是 :-->
                <router-link :to="{name:'UserProfile', params:{id: 1}}">个人信息</router-link>
              </el-menu-item>

Profile.vue

第一种方式

<template>
<!--  所有的元素，不能直接在根节点下创建  需要用div套起来-->
<div>
  <h1>个人信息页</h1>
  {{$route.params.id}}
</div>
</template>

<script>
export default {
  //这里的name 不一定要和创建的一致  只是改了之后调用改的名字而已
  name: "UserProfile"
}
</script>

<style scoped>

</style>

index.js

import Vue from "vue";
import Router from "vue-router";
import Main from "../views/Main";
import Login from "../views/Login";
import UserList from "../views/user/List";
import UserProfile from "../views/user/Profile";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/main',
      component: Main,
      //路由嵌套
      children: [
        {
          //通过:id去取  要保证这里的name 与Main.vue里面的name是一致的
          path: '/user/profile/:id',
          name:'UserProfile',
          component: UserProfile
        },
        {path: '/user/list',component: UserList}
      ]
    },
    {
      path: '/login',
      component: Login
    }
  ]
});

第二种方式：

<template>
<!--  所有的元素，不能直接在根节点下创建  需要用div套起来-->
<div>
  <h1>个人信息页</h1>
  {{id}}
</div>
</template>

<script>
export default {
  //这里的name 不一定要和创建的一致  只是改了之后调用改的名字而已
  props:['id'],
  name: "UserProfile"
}
</script>

<style scoped>

</style>

index.js

import Vue from "vue";
import Router from "vue-router";
import Main from "../views/Main";
import Login from "../views/Login";
import UserList from "../views/user/List";
import UserProfile from "../views/user/Profile";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/main',
      component: Main,
      //路由嵌套
      children: [
        {
          //通过:id去取  要保证这里的name 与Main.vue里面的name是一致的
          path: '/user/profile/:id',
          name:'UserProfile',
          component: UserProfile,
          props: true},
        {path: '/user/list',component: UserList}
      ]
    },
    {
      path: '/login',
      component: Login
    }
  ]
});

重定向

index.js

import Vue from "vue";
import Router from "vue-router";
import Main from "../views/Main";
import Login from "../views/Login";
import UserList from "../views/user/List";
import UserProfile from "../views/user/Profile";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/main',
      component: Main,
      //路由嵌套
      children: [
        {
          //通过:id去取  要保证这里的name 与Main.vue里面的name是一致的
          path: '/user/profile/:id',
          name:'UserProfile',
          component: UserProfile,
          props: true},
        {path: '/user/list',component: UserList}
      ]
    },
    {
      path: '/login',
      component: Login
    },{
        //重定向
      path:'/goHome',
      redirect:'/main'
    }
  ]
});

Main.vue在main中添加这句代码：

 <el-menu-item index="1-3">

                <router-link to="/goHome">回到首页</router-link>
              </el-menu-item>

完整的Main.vue代码

<template>
  <div>
    <el-container>
      <el-aside width="200px">

        <el-menu :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <!--name:传组件名 通过params去传参  需要通过v-bind去绑定   传参数需要对象 用v-bind绑定  简写是 :-->
                <router-link :to="{name:'UserProfile', params:{id: 1}}">个人信息</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <!--插入的地方-->
                <router-link to="/user/list">用户列表</router-link>
              </el-menu-item>
              <el-menu-item index="1-3">

                <router-link to="/goHome">回到首页</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
            <el-menu-item-group>
              <el-menu-item index="2-1">分类管理</el-menu-item>
              <el-menu-item index="2-2">内容列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title"><i class="el-icon-caret-right"></i>系统管理</template>
            <el-menu-item-group>
              <el-menu-item index="3-1">用户设置</el-menu-item>
              <el-menu-item index="3-2">用户修改</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
<!--        顶部栏-->
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>

        <el-main>
          <!--在这里展示视图-->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  name: "Main"
}
</script>
<style scoped lang="scss">
.el-header {
  background-color: #2e78db;
  color: #5f0f0f;
  line-height: 60px;
}
.el-aside {
  color: #6f1313;
}
</style>

路由模式与404

路由模式有两种

• hash:路径带#符号，如http://localhost/#/login
• history:路径不带#符号，如http://localhost/login

修改路由配置，代码如下：

export default new Router({
mode:'history',
routes:[

]
})

index.js

import Vue from "vue";
import Router from "vue-router";
import Main from "../views/Main";
import Login from "../views/Login";
import UserList from "../views/user/List";
import UserProfile from "../views/user/Profile";

Vue.use(Router);

export default new Router({
  mode:'history',
  routes: [
    {
      path: '/main/:name',
      component: Main,
      //props拿到参数
      props:true,
      //路由嵌套
      children: [
        {
          //通过:id去取  要保证这里的name 与Main.vue里面的name是一致的
          path: '/user/profile/:id',
          name:'UserProfile',
          component: UserProfile,
          props: true},
        {path: '/user/list',component: UserList}
      ]
    },
    {
      path: '/login',
      component: Login
    },{
      path:'/goHome',
      redirect:'/main'
    }
  ]
});

Login.vue

  methods: {
    onSubmit(formName) {
      // 为表单绑定验证功能
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
          this.$router.push("/main/" + this.form.username);
        } else {
          this.dialogVisible = true;
          return false;
        }
      });
    }
  }

Main.vue

 <el-container>
<!--        顶部栏-->
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <span>{{name}}</span>

        <el-main>
          <!--在这里展示视图-->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  props:['name'],
  name: "Main"
}
</script>

404

NotFound.vue

<template>
<div>
  <h1>404,你的页面走丢了</h1>
</div>
</template>

<script>
export default {
  name: "NotFound"
}
</script>

<style scoped>

</style>

index.js

import Vue from "vue";
import Router from "vue-router";
import Main from "../views/Main";
import Login from "../views/Login";
import UserList from "../views/user/List";
import UserProfile from "../views/user/Profile";
import NotFound from '../views/NotFound'

Vue.use(Router);

export default new Router({
  mode:'history',
  routes: [
    {
      path: '/main/:name',
      component: Main,
      //props拿到参数
      props:true,
      //路由嵌套
      children: [
        {
          //通过:id去取  要保证这里的name 与Main.vue里面的name是一致的
          path: '/user/profile/:id',
          name:'UserProfile',
          component: UserProfile,
          props: true},
        {path: '/user/list',component: UserList}
      ]
    },
    {
      path: '/login',
      component: Login
    },{
      path:'/goHome',
      redirect:'/main'
    },
    {
      path:'*',
      component:NotFound

    }
  ]
});

路由钩子与异步请求

beforeRouteEnter:在进入路由前执行

beforeRouterLeave:在离开路由前执行

Profile.vue

<template>
  <!--  所有的元素，不能直接在根节点下创建  需要用div套起来-->
  <div>
    <h1>个人信息页</h1>
    {{id}}
  </div>
</template>

<script>
export default {
  //这里的name 不一定要和创建的一致  只是改了之后调用改的名字而已
  props:['id'],
  name: "UserProfile",
  //过滤器  to:相当于request  from:相当于response next相当于chain
  beforeRouteEnter:(to,from,next)=>{
    console.log("进入路由之前");
    next();

  },
  beforeRouteLeave:(to,from,next)=>{
    console.log("进入路由之后");
    next();

  }
}
</script>

<style scoped>

</style>

index.js里面也做了相应的修改

import Vue from "vue";
import Router from "vue-router";
import Main from "../views/Main";
import Login from "../views/Login";
import UserList from "../views/user/List";
import UserProfile from "../views/user/Profile";
import NotFound from '../views/NotFound'

Vue.use(Router);

export default new Router({
  mode:'history',
  routes: [
    {
      path: '/main',
      component: Main,
      //props拿到参数
      props:true,
      //路由嵌套
      children: [
        {
          //通过:id去取  要保证这里的name 与Main.vue里面的name是一致的
          path: '/user/profile/:id',
          name:'UserProfile',
          component: UserProfile,
          props: true},
        {path: '/user/list',component: UserList}
      ]
    },
    {
      path: '/login',
      component: Login
    },{
      path:'/goHome',
      redirect:'/main'
    },
    {
      path:'*',
      component:NotFound

    }
  ]
});

Main.vue里面也做了相应的修改

<template>
  <div>
    <el-container>
      <el-aside width="200px">

        <el-menu :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <!--name:传组件名 通过params去传参  需要通过v-bind去绑定   传参数需要对象 用v-bind绑定  简写是 :-->
                <router-link :to="{name:'UserProfile', params:{id: 1}}">个人信息</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <!--插入的地方-->
                <router-link to="/user/list">用户列表</router-link>
              </el-menu-item>
              <el-menu-item index="1-3">

                <router-link to="/goHome">回到首页</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
            <el-menu-item-group>
              <el-menu-item index="2-1">分类管理</el-menu-item>
              <el-menu-item index="2-2">内容列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title"><i class="el-icon-caret-right"></i>系统管理</template>
            <el-menu-item-group>
              <el-menu-item index="3-1">用户设置</el-menu-item>
              <el-menu-item index="3-2">用户修改</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
<!--        顶部栏-->
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>


        <el-main>
          <!--在这里展示视图-->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {

  name: "Main"
}
</script>
<style scoped lang="scss">
.el-header {
  background-color: #2e78db;
  color: #5f0f0f;
  line-height: 60px;
}
.el-aside {
  color: #6f1313;
}
</style>

参数说明

• to:路由将要跳转的路径信息
• from:路径跳转前的路径信息
• next:路由的控制参数
  • next()跳入下一个页面
  • next(’/path’)改变路由的跳转方向，使其跳到另一个路由
  • next(false)返回到原来的页面
  • next((vm)=>{})仅在beforeRouterEnter中可用，vm是组件实例

在钩子函数中使用异步请求

1.安装Axios cnpm install axios -s

2.在main.js中引用Axios

import axios from 'axios'
Vue.prototype.axios = axios;

3.准备数据：只有我们的static目录下的文件是可以被访问到的，所以我们就把静态文件放入该目录下。

//静态数据存放的位置
static/mock/data.json

出现这个错误的解决方法：webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

单独重装 webpack-dev-server模块

• npm uninstall webpack-dev-server

• npm install webpack-dev-server@2.9.1

• npm run dev

如果axios没有安装成功 那么 不断的尝试cnpm install axios -s或者npm install --save axios vue-axios然后它就突然成功了不知道什么原因

Profile.vue

<template>
  <!--  所有的元素，不能直接在根节点下创建  需要用div套起来-->
  <div>
    <h1>个人信息页</h1>
    {{id}}
  </div>
</template>

<script>
export default {
  //这里的name 不一定要和创建的一致  只是改了之后调用改的名字而已
  props:['id'],
  name: "UserProfile",
  //过滤器  to:相当于request  from:相当于response next相当于chain
  beforeRouteEnter:(to,from,next)=>{
    console.log("进入路由之前");//加载数据
    next(vm => {
      vm.getData();//进入路由之前去执行这个getData()方法

    });

  },
  beforeRouteLeave:(to,from,next)=>{
    console.log("进入路由之后");
    next();

  },
  methods:{
    getData:function () {
      this.axios({
        method:'get',
        url:'http://localhost:8080/static/mock/data.json'
      }).then(function (response) {
        console.log(response)

      })

    }
  }
}
</script>

<style scoped>

</style>

main.js

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';
//cnpm: 有可能安装失败 使用npm试试
import axios from 'axios';
import VueAxios from 'vue-axios'
//把路由配到main.js里面   一般用大写表示组件
Vue.use(VueAxios, axios);
Vue.use(router);
Vue.use(ElementUI);


new Vue({
  el: '#app',
  router,
  render: h => h(App)  //ElementUI 配的
});

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';
//cnpm: 有可能安装失败 使用npm试试
import axios from 'axios';
import VueAxios from 'vue-axios'
//把路由配到main.js里面   一般用大写表示组件
Vue.use(VueAxios, axios);
Vue.use(router);
Vue.use(ElementUI);


new Vue({
  el: '#app',
  router,
  render: h => h(App)  //ElementUI 配的
});

data.json

{
  "name": "狂神说JAVA",
  "url": "https://blog.kuangstudy.com",
  "page": 1,
  "isNoProfit": true,
  "address": {
    "street": "含光门",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://space.bilibili.com/95256449"
    },
    {
      "name": "狂神说JAVA",
      "url": "https://blog.kuangstudy.com"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}