前端Vue（七）
Vue组件
一、组件中定义属于组件的数据
当然，我们也可以定义一个数组，然后遍历输出：
二、组件中事件的定义
说了这么多关于组件的，那么组件的事件又该怎么定义与使用呢？
组件内部也可以定义一个 methods，里面可以自己定义方法。
同样的，也可以取得组件内部data里面的数据：
可以看到能触发！
总结：
三、Vue中父组件传递子组件事件，并在子组件中调用
先建立一个组件：
然后定义一个事件：
接着，此时我们想要组件中的这个方法，调用Vue实例中的某个方法，该怎么做呢？
这是Vue实例中的事件：
之前传递数据，是通过 v-bind 的形式绑定数据来传递，那么如果我们想要将Vue中的事件传递，可以通过 v-on 也就是 @（简化写法），来传递：
可以看到，Vue实例中的 findAll（），通过 @aaa 来绑定，接着，在组件内部通过 this.$emit 来取得绑定的事件 aaa ，接着才能调用成功！
这样就实现了 子组件 调用了 父组件 中的事件。
总结：
在子组件中调用传递过来的相关事件必须使用 this.$emit ( ’ 函数名 ’ ) 方式调用。
Vue路由
一、路由的安装
关于路由这一块，后端开发人员会比较熟悉。
路由：根据请求的路径按照一定的路由规则进行请求的转发从而帮助我们实现统一请求的管理。
作用：用来在Vue中实现组件动态的切换
为什么前端要使用路由这一块呢？
因为Vue一切皆组件，之后开发的页面都是一个一个组件构成的。 有的时候一个页面有多个组件，但某一时刻只想要这一个组件展示出来，这时候就需要路由来安排什么时候显示的是哪个组件。
Vue路由官方文档：https://router.vuejs.org/zh/
Vue路由安装：https://router.vuejs.org/zh/installation.html
二、路由的基本使用
首先，需要创建一个路由对象：
接着路由的切换需要按照一定的规则，所以里面有个router对象，里面是一个数组：
数组里面就是一个个路径。
现在先创建两个组件，方便举例子：
注意：用了组件之后，就不需要再注册组件了，直接把组件绑定给路由就可以了。那么怎么绑定呢？
这样一来，以后走的是login路径的时候，就是使用login的组件。
但是此时路由对象与Vue实例对象是没有关系的，需要建立关系！
此时还有个与 methods 平级的对象，叫 router 对象：
此时可以发现，加了路由之后，路径就不一样了：
可以看到最后是有个井号斜杠： #/
但是此时我们在路径后面加 login 还是显示不了的。现在直接访问定义还不行，还需要在页面使用路由，显示路由的组件：
前面的截图有些地方的代码出错了，以这张截图为准！ 比如创建路由对象的 routes。
此时，才能看到页面中展示的组件：
可以通过a 标签来切换路径：
注意：在路径前面要加个井号 # ，否则会切换路径失败！
总结：
三、router-link的使用
先来个基础路由模板：
注意：这里的 router 直接这么写没有问题。
再加两个 a 标签：
但是如果每次都要写个井号 # ，有人说这样也太麻烦了，这时就可以使用 router-link ，使用 router-link 最大的好处就是书写路径不用写井号 #
使用方式：
但是在检查元素的时候还是可以发现：
还是会给我们加了井号 # 。
如果觉得链接不好看，想要按钮样式，router-link 同样可以转换样式，提供了一个 tag 属性：
里面绑定了一个单击事件，点击就会帮我们切换路径。
同样可以是 span 样式：
总结：
四、默认路由
1、方式一（不推荐）
可以发现，我们默认进来的时候，是空空的页面，但也不能进来就是空空的，也不能要自己手动输入地址栏来切换，需要一进来默认页面就有元素。可以这么设置：
这么写，就意味着 login 就是根组件，一进来看到的就是 login 组件的内容。
但是这么写，不推荐。因为进入主页的时候地址是 # ，点击登录后，地址会多个 login ，这样不太好。
2、方式二（推荐）
推荐使用下面这种方式：
redirect 会重定向。这么写代表以根路由进入页面的时候，会重定向到 login 路径，意味着一进来，地址直接就是 login 路径。