前言为了让读者更好的体验，了解vue-router以及接下来vuex的介绍，决定来个实战教程，给大家带来更多深入了解vue-router，在此之前，读者应该先了解并去官网下载npm和node，附：npm官网项目搭建这里我使用vue-cli+webpack搭建初始项目，那里vue官网也有相关介绍，这里教大家怎么做，先通过控制台进入相关文件目录，然后输入#后面是注释#$表示当前文件目录#vue的全局安装-cli$npminstall--globalvue-cli#根据webpack模板新建项目创建文件$vueinitwebpackmy-project#安装依赖，我们开始吧$cdmy-project$npminstall#运行项目my-preoject$npmrundevnpminstall--globalvue-cli下载构建工具vueinitwebpackmy-project初始化项目npminstall下载相关资源到node_modelsnpmrundev运行项目后，在浏览器输入http://localhost:8080/#/看到vue-router的介绍经过上面简单的搭建，一个项目的初始化就完成了，这里vue-cli和webpack已经帮我们搭建好了文件目录结构和基础目录。在使用vue-router之前，不得不先介绍一下什么是vue-router？是vue.js下的路由组件，那么什么是路由呢？网上官方的介绍很多，相信小白很难看懂，这里简单说明一下。其实路由就是url，什么是url？url是唯一的资源定位符。简单的说就是标记页面的唯一标签，比如https://www.baidu.com，其中www.baidu.com是唯一的资源定位符，而https只是一种规范计算机通信协议的协议网络。介绍完这些，我们应该怎么使用呢？其实很简单。平时我们经常会遇到在一个网站点击一个链接会弹出另一个页面，然后我们可以发现他们的url变了，而vue-router是这样的，在同一个域名下（这里是域名是http://localhost:8080)，更改域名后面的字符参数，比如http://localhost:8080/me和http://localhost:8080/you是两个不同的页面依赖vue-router来得以实现。引用vue-router如果你之前没有安装过vue-router，建议先去官网看文档，使用npm安装，这里就不介绍了。首先我先添加两个文件me.vue和you.vue//me.vue我是我
//you.vue我是你
然后修改my-project/src/router（存放路由相关信息的目录），修改.js下面的index为importVuefrom'vue'从'vue-router'导入路由器exportdefaultnewRouter({routes:[{path:'/',name:'HelloWorld',component:HelloWorld},//将组件命名为路由，输入http://localhost:8080/#/me//可以进入不同的页面{path:'/me',component:me},//命名路由上的组件，输入http://localhost:8080/#/you//进入不同的页面{path:'/you',component:you}]})这样，你只会输入http://localhost:8080/#/me，你会进入其他页面。是不是很简单，那我们怎么跳转页面呢？转动？这个用到比较有意思的知识，就是router-link，你只需要在你的组件代码下输入这里是跳转链接，然后网页会自动跳转到http://localhost:8080/#/me页面，但这总是不好的，因为如果因为某些原因，我们想改变路由的名字（比如把我改成他），我们要改两个文件所以vue团队已经想到了，就是name属性，修改my-project/src/router（存放路由相关信息的目录）下的index.js为//...{path:'/me',name:'me',component:me},//...然后跳转到这里是跳转链接可以用来跳转到高级应用前端路由。最基本的应用和上面的参考一样。当然也可以通过js代码来改变。这个也很简单，比如加一个按钮，点击按钮通过js跳转到其他页面就是重定向。简单的js代码如下，可以跳转到其他页面。vue.$router.push('/me')动态路由通过router-link传递参数，比如User，传入参数userId，渲染不同的路由信息??嵌套路由嵌套路由其实简单理解就是子路由，比如我想在我下面添加几条路由him和she，那么上面的代码可以这样写，然后输入http://localhost:8080/#/me/him进入子路由页面//...{path:'/me',name:'me',component:me,children:[{path:'him'//...},{path:'she'//...}]},//...延迟加载结合异步组件并在组件中创建触发ajax请求获取钩子上的数据，可以最大限度地减少加载时间，减少流量消耗。没有项目的人可能接触的少。建议先了解这个概念。重定向可以实现一些需要根据特定逻辑改变页面原有路由的需求。例如，当一个简单的非登录状态的页面访问“个人信息”路由时，应该重定向到登录路由页面。History控件History是Html5的新语法。个人觉得是为了跳转，尤其是微信小程序。就是控制点击返回按钮的时候，不退出页面，跳转到自己想要的页面。总结其实还有很多高级的应用场景，我就不一一列举了，因为这些其实官方文档里面解释的最好，我这里只是解释简单的用法，初学者可能对官方文档有误解解释一下，希望大家学会看API，附上官网地址
