outer文件->index.js: children：[{ }]:
router文件->index.js: children：[{ }]:
path: '/test',
component: test,
children: [
{
path: '/a',
componcent: Home
},
{
path: '/b',
componcent: test
}
]
}
注：如果报错，重新使用npm脚本int，然后再运行
然后再views文件中的test文件的test.vue中引用router-link和router-view：
<template>
<div id="app">
<div id="nav">
<router-link to="/a">a</router-link>
<router-link to="/b">b</router-link>
</div>
<router-view/>
</div>
</template>
<script type="text/ecmascript-6">
export default {
}
</script>
<style lang="scss" scoped></style>
1、mock.js 拦截ajax请求，生成随机数据
新学到的东西，以我的方式分享一下，我们在开发中，需要后端提供api接口，然后拿到接口去遍历生成数据，渲染到页面上显示。在有的时候，还没拿到后端提供的接口时，前端可以自己模拟后台制作简单的json格式数据进行开发工作
mock.js 使用： 可参考mock.js官网
1、前提在有搭建Vue-cli 项目后，下载axios和mock.js
安装：npm install mockjs axios
2、模拟数据，在项目src目录中新建mock文件夹，再建xxx.json的json格式数据文件
3、在mock文件夹中建立mockServer.js文件，引入mock，测试mock，可参考下图
4、修改ajax请求的mock路径（baseURL: '/api' 改成为 '/mock'，其实就是原来的api）
5、在api文件夹 index.js中引入mockAjax.js文件，进行测试
2、mock.js 模拟数据快速上手，最简单用法
1、还是先在脚手架中，下载axios和mock.js // npm install mockjs axios
2、然后在src目录中分别创建mock文件夹和index.js文件，并在main.js中引入 require('./mock/index');
3、开始模拟数据 （目录提示 --> 在src目录下的mock文件夹index.js文件中书写以下代码）
// 1、引入mockjs
const Mock = require('mockjs');
// 2、获取 mock.Random 对象
const random = Mock.Random;
console.log(random); // 简单使用就不操作了，需要操作的可以去看文档
// 3、基本用法 Mock.mock(url, type, data) // 参数文档 https://github.com/nuysoft/Mock/wiki
Mock.mock('/user/list', 'get', {
code: 200,
message: '成功',
data: {
// 生成十个如下格式的数据
'list|10': [
{
'id|+1': 1, // 数字从当前数开始依次 +1
'age|18-40': 20, // 年龄为18-40之间的随机数字
'sex|1': ['男', '女'], // 性别是数组中随机的一个
name: '@cname', // 名字为随机中文名字
email: '@email', // 随机邮箱
isShow: '@boolean', // 随机获取boolean值
},
],
},
});
4、在app.vue中请求数据，引入axios发送请求即可
<template>
<div>app</div>
</template>
<script>
import axios from 'axios'; // 引入axios
export default {
name: 'App',
data() {
return {};
},
mounted() {
axios.get('/user/list').then((res) => {
console.log(res);
});
},
};
</script>
<style scoped></style>
