Vue-Router学习记录（一）
Vue-router
Router是路由的意思。Router的功能就如它名字一般，实现对路由的操作。
我们可以换个角度理解：路由器相信大家都听过，也就是家里连接宽带的猫。路由器可以散播WiFi信号，我们通过连接这个WiFI来使用与之绑定的宽带账号提供的网络服务。那么路由器的功能就是把宽带账号与它本身的WiFi相绑定。那么将此概念移到前端项目中来，Router的作用就是将各个页面与地址相互绑定，但是Router与路由器不同的是，Router控制的是多个页面，不像路由器一样只控制一个宽带账号，所以Router还需要对页面进行控制。
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。举个例子：假设 www.huawei.com 是华为的官网，那么通过 www.huawei.com/shopping 来访问华为商城，这就是Router可以做到的事。
Vue-router的安装
Vue-Router是Vue的核心插件之一，当我们需要使用它时，我们就要把它引入页面或者项目文件里。
（1）在HTML页面引入Vue-router.js文件
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
（2）在Vue项目里引入Vue-Router
在Vue-cli脚手架创建项目时，会有一个询问是否安装Vue-router，直接选Y即可。
若是未安装Vue-router的项目，则需要使用npm安装Vue-router，然后在main.js文件中配置好
NPM
main.js
在Vue-router文件引进来之后，我们可以通过 this.$router 在全局访问路由器，也可以通过 this.$route 来访问当前路由。
带有路由功能的标签
Vue提供两个比较特殊的标签：<router-link>和<router-view>
<router-link>标签是具有路由功能的标签，它有一个to属性，属性值为目标路由，该标签默认渲染成<a>标签，点击它会跳转至to属性所指定的目标路由。
<router-view>标签如同它的名字一样，是对目标路由的展示，和<router-link>配合使用。但是它有一个条件，就是<router-link>标签的to属性指定的路由必须是当前路由的子路由，不然<router-view>不生效，而当前页面会直接发生跳转。
如图所示
页面分为四部分，最大的区域就是router-view区域，在点击当前页面的子路由 index 或 adult 时，router-view区域会展示相应的页面，而点击非当前页面的子路由时，当前整个页面会跳转至点击的路由界面。
