VueRouter是Vue.js官方的路由管理器。它与Vue.js的核心深度集成，可以轻松构建单页应用程序。学习Vue，VueRouter是必须要掌握的技能之一。官方教程是最好的阅读文献。请仔细阅读应用场景。首先说一下vue-router的一个典型应用场景。做一个WebAPP，至于风格，照搬掘金APP的风格就可以了。要求：Bottomnavbar:最下面一排固定按钮Topnavbar:顶部也有一排固定按钮部分页面要跳转到相应的功能页面。单击顶部的后退按钮后，它应该返回到上一页。加载页面时尽量少刷新，甚至根本不刷新。优化用户体验加载速度一定要快，尽量减少流量消耗。URL要漂亮，URL可以动态接受参数。如：http://music.163.com/#/my/m/m...需求分析菜鸟：菜鸟拿到需求，前三个需求比较简单，用显示器切换即可解决css的属性。第四个和第五个要求呢？加载页面的时候，必须要进行页面请求，页面资源也是大流量。至于第六个功能，做起来太难了。挠头挠头……老鸟：菜鸟，你看看苦思冥想的你，遇到什么问题了？Rookie：妈的产品经理，让我做项目，还提了一堆附加要求，我想大刀砍了他。与产品经理不和的老将：哦，别担心。乍一看，你还停留在传统开发的思路上。都2020年了，你还对单页开发一窍不通，你是不是过气了？菜鸟：什么是单页开发，说说看？有这么神奇吗？能解决我的问题吗？老手：向百度学习不晚。哈哈。菜鸟：我在努力学习...什么是单页应用，只有一个WEB主页面，公共资源（js、css等）只需要加载一次，所有内容都包含在主页面中，对每个功能模块进行组件化。单页应用跳转是切换相关组件，只刷新本地资源。常用于PC端官网、购物等网站。什么是多页每次跳转一个页面，后台服务器都会返回一个新的html文档。这类网站也是多页面网站，也叫多页面应用。传统的页面写法大多是多页面安装Vue-Routernpmnpminstallvue-router//main.jsimportVuefrom'vue'importVueRouterfrom'vue-router'Vue.use(VueRouter)基础路由配置exportconstconstantRouterMap=[。..,{path:'/',component:Layout,//redirectredirect:'/dashboard',//嵌套多级路由children:[{path:'dashboard',component:()=>import('@/views/Dashboard'),name:'Dashboard',//路由元信息meta:{...}}]},...]路由拆分我们可以将路由拆分成普通路由，按照业务和管理路由分别是任何人都可以查看的基本路线。比如首页。专属权限路由管理员登录后获得的唯一专属权限页面。该路由页面根据不同的权限显示不同的公共权限路由权限拦截页面。比如403,403,503...路由控制通过vue-router的beforeEach钩子控制路由跳转通过vue-router的addRoutes方法注入路由实现控制（1）beforeEach通过请求获取当前用户路由服务端，钩子跳转对每条路由进行跳转判断，如果传入的路由对象是基本路由和权限路由，则正常跳转。否则，取消跳转，转到错误页面router.beforeEach((to,from,next)=>{//.../*to:Route:即将进入的目标路由对象from:Route:ThecurrentnavigationisaboutleaveRoutingnext:Function:必须调用这个方法来解析这个hook，执行效果取决于next方法的调用参数*/})(2)addRoutes动态添加更多的路由规则。参数必须是符合routes选项要求的数组。通过调用addRoutes方法，注入vue-router实例实现路由控制router.addRoutes(routes:Array
