初始vue(组件的定义及传参，Axios数据请求及渲染，vue路由）
ss会介绍一下内容：
组件的定义及传参，Axios数据请求及渲染，vue路由
1.组件的定义
在编写页面过程中，轮播图可能是个重复使用的页面，这个时候就需要用到组件，把重复的页面封装成公共组件。复用性比较好
如何封装成公共组件
例如：在components目录下新建一个Banner.vue
在Banner.vue中定义轮播的相关页面以及对应的方法。
在页面中如何使用Banner.vue组件。
首先引入banner。在components中引入自定义组件
components: { Banner } 意思为引入组件，组件可以写在别的文件中，也可以写在本文件中，需要赋值给变量
组件传参：
假设从子组件中如何获取父组件的值，此时需要传参。
父页面中：
定义一个imgArr参数，传入img所对应的数据,img的数据在父页面中
在子组件中使用prop:["imgArr"],这个imgArr表示的是从父页面中传入的参数是imgArr,所以接收时必须用imgArr接收
就可以在子组件中使用img参数所传过来的值了
props中接收参数时2种定义方式。
props 是子组件用来接受父组件传递过来的数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "props "：
注意: props 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。
父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！
可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口
- 使用
$on(eventName)监听事件 - 使用
$emit(eventName)触发事件
2.Axios数据请求
Axios是数据请求的方式之一，
如何使用Axios
先安装Axios :npm install axios --save
在man.js中引入Axios
import axios form 'axios'
axios.defaults.baseURL = "http://127.0.0.1:8080"
Vue.prototype.$http = axios; 把axios定义到Vue原生中，通过定义的$http来调用axios
在index.vue中调用axios
getlist() {
this.$http.get('/home/page').then(res =>{
console.log(res)
})
}
3.Vue Router
Vue Router是Vue.js的官方路由器。它与Vue.js核心深度集成，使使用Vue.js轻松构建单页应用程序变得轻而易举。功能包括：
- 嵌套路线/视图映射
- 模块化，基于组件的路由器配置
- 路由参数，查询，通配符
- 查看由Vue.js过渡系统提供动力的过渡效果
- 细粒度的导航控制
- 与自动活动CSS类的链接
- HTML5历史记录模式或哈希模式，在IE9中具有自动备用
- 可自定义的滚动行为
1.嵌套路线：
嵌套路由就是在一个被路由过来的页面下可以继续使用路由，嵌套也就是路由中的路由的意思。
比如在vue中，我们如果不使用嵌套路由，那么只有一个
为什么要使用嵌套路由？
就比如在一个页面中， 在页面的上半部分，有三个按钮，而下半部分是根据点击不同的按钮来显示不同的内容，那么我们就可以在这个组件中的下半部分看成是一个嵌套路由，也就是说在这个组件的下面需要再来一个
官网是如何解释的？
/user/foo/profile /user/foo/posts
+------------------+ +-----------------+
| User | | User |
| +--------------+ | | +-------------+ |
| | Profile | | +------------> | | Posts | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+user表示用户页， 而user就可以看成是vue中的一个单页面，对于一个user，一定要有哪一个用户，这里的foo（小明、小红）就代表了一个用户，这里的profile可以理解为个人主页，这里的posts可以理解为这个人所发表的文章， 而title可能是不变的，比如无论切换到这个人发表的文章，还是切换到这个人的个人主页，我们都希望在最上方显示同样的东西，而在切换的时候换的就是下面的部分，这个部分我们就可以用
User {{ $route.params.id }}
const router = new VueRouter({ // 创建路由实例
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 中
path: 'posts',
component: UserPosts
}，
// 当 /user/:id 匹配成功，
// UserHome 会被渲染在 User 的 中
{
path: '',
component: UserHome
},
// ...其他子路由
]
}
]
}) 第一段代码是在文件中放了
从路由配置中，我们可以看到： 当路径是 /user/小明 或者 /user/小红 时， 就会把User渲染到页面中，这个渲染的就是路由。 （:id就是小明、小红）
如果我们想看小明的个人主页，就是 /user/小明/profile 这时就会把 UserProfile 组件渲染到这个二级路由中了。如果我们想看小明发表的文章，就是 /user/小明/posts 这时就会把 UserPost 组件渲染到这个二级路由中， 这也就是二级路由了。
1.1、从上面的代码可以看出： 在组件中，我们可以通过 $route.params.id 来获取到user/小明/post 中的小明，这样，我们就可以进行个性化的设置了。
2.2以/ 开头的嵌套路径会被当做根路径，
在上面的代码中，我们在children下，写path: "profile", 就相当于拼接成了 /user/:id/profile ，当然，我们也可以直接写为 path: "/user/:id/profile" ，最终的结果是一样的，但如果嵌套层数过多的话，第二种比较直观，清晰的查看
注意需要匹配一个空的情况，然后匹配一个default组件，避免出现空白页的问题。
2 模块化，基于组件的路由器配置：
如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能，用vue-cli生产了我们的项目结构，src文件目录下会有一个router文件夹，此处就是编写路由组件的地方。在src/router/index.js，这个文件就是路由的核心文件：
import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入vue-router
import Hello from '@/components/Hello' //引入根目录下的Hello.vue组件
Vue.use(Router) //Vue全局使用Router
export default new Router({
routes: [ //配置路由，这里是个数组
{ //每一个链接都是一个对象
path: '/', //链接路径
name: 'Hello', //路由名称，
component: Hello //对应的组件模板
}，{
path:'/hi',
component:Hi,
children:[ //子路由,嵌套路由
{path:'/',component:Hi},
{path:'hi1',component:Hi1},
{path:'hi2',component:Hi2},
]
}
]
})
2.1.vue-router参数传递
1.router-link 是一个组件，它默认会被渲染成一个带有链接的a标签，通过to属性指定链接地址。
to：导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 to="/" ，
[text] ：就是我们要显示给用户的导航名称。
2.name：就是我们在路由配置文件中起的name值。
另：命名路由就是用一个名称来标识一个路由，在定义路由的时候设置一个name属性即可。在router-link中也可以用路由的名字来链接到一个路由。
params：就是我们要传的参数，它也是对象形势，在对象里可以传递多个值。
最后用$route.params.username进行接收.
3.用url传参
:冒号的形式传递参数
(1).在router路由配置文件里以冒号的形式设置参数
{
path:'/params/:newsId/:userName,
component:Params
}(2).组件形式，在src/components目录下建立我们params.vue组件。
我们在页面里输出了url传递的参数。
{{ msg }}
ID：{{ $route.params.newsId}}
用户名：{{ $route.params.userName}}