VueRouter安装vue-routernpminstallvue-router--save搭建框架，在模块化项目中使用（因为是插件，可以通过Vue.use()安装路由功能）第一步：导入路由对象并调用Vue.use(VueRrouter)第二步：创建路由实例并传入路由映射配置第三步：在Vue实例中挂载创建的路由实例在src文件夹下手动创建一个router文件夹在router文件夹中写入.jsindex.js//配置路由相关信息构建框架importVuRouterfrom'vue-router'importVuefrom'vue'//1.通过Vue.use(plugin)//2安装插件Vue.ues(VueRouter)。创建VueRouter对象constroutes=[]constrouter=newVueRouter({//配置路径和组件routes的应用关系:})将router对象传给vue实例exportdefaultrouter//3.//将router对象传入instance//importrouterfrom'path'inthemain.jsinstanceintheindex.jsfile//importHomefrom'componentpath'importHomefrom'componentpath'importHomefrom'componentpath'constroutes=[{path:'/home(changeable)',component:null//一个映射关系是一个对象},{path:'/about(changeable)',component:null}]使用路由：via和写在app.vue中相当于一个标签homepage相当于显示路由默认路由上方或下方链接上的内容，使路由默认跳转到首页，可以渲染。只需配置一个映射。constroutes=[{path:'/',redirect:'/home'}]//路由中，配置了另外一个映射pa/th。rootpathredirect是重定向，也就是我们将根路径重定向到/home的路径，同样可以得到想要的结果。router-link补充标签：标签可以指定在之后渲染什么组件。会被渲染成一个button按钮并replace：replace不会留下历史记录，所以当指定replace时，back键无法返回到上一页active-class：当对应的路由匹配成功后，会自动为当前元素设置一个router-link-active类，active-该类可以修改默认名称。高亮导航菜单或者底部tabbar的时候会用到这个类，但是通常不会修改这个类的属性，直接使用默认的router-link-active，通过代码this跳转到路由。$router.push('/home')在使用延迟加载路由时重新加载。打包构建应用时，Javascript包会变得很大，影响页面加载。如果我们能把不同路由对应的组件分成不同的代码块，然后在访问路由的时候加载对应的组件，效率会更高。路由懒加载的主要作用是将路由对应的组件一一打包成js代码块。只有当路由被访问时，它才会被加载。对应组件懒加载方法方法一：结合Vue的异步组件和Webpack的代码分析constHome=resolve=>{require.ensure(['../components/Home.vye'],()=>{resolve(require('../components/Home.vue'))})};//旧版本2：AMD写法constAbout=resolve=>require(['../components/About.vue'],resolve);方法三：在ES6中，更简单的组织Vue异步组件和Webpack的代码拆分的方法constHome=()=>import('../components/Home.vue')路由的嵌套使用nestedroutes是一个很常见的功能。比如首页，我们希望通过/home/news和/home/message来访问一些内容。路径映射组件。访问这两个路径也会渲染两个组件，实现嵌套路由。分两步：创建相应的子组件，并在路由映射中配置相应的子路由在组件内部使用标签//创建组件，如news、message（内容显示在首页)//打开index.jsconstHomeNews=()=>import('../components/HomeNews')constHomeMessage=()=>import('../components/HomeMessage')constroutes=[path:'/home',children;[{path:'news'//子路由不需要加'/'component:HomeNews},{path:'Message'//子路由不需要加'/'component:HomeMessage}]]//OpenHome.vue新闻新闻参数传递传递参数主要有两种类型：params的类型和queryparams配置路由格式：/router/:id传递方式：路径后形成的路径后面跟着相应的值传递：/router/123，/router/abcquery配置路由格式的类型：/router，即普通配置传输方式：对象中使用query的key后形成的路径作为传递方式：/router?id=123./router?id=abc使用：和Javascript代码来导航和保护router.beforeEach((to,from,next))=>{document.title=to.matched[0].meta。titleconsole.log(to)next()}keep-alivekeep-alive是Vue的内置组件，可以保持被包含组件的状态，或者避免重新渲染router-view也是一个组件，如果直接包裹在keep-alive中，路径匹配到的所有视图组件都会被缓存使用方法：includekeep-alive是Vue的内置组件，可以让被包含的组件保持状态，或者avoidre-rendering其中有两个非常重要的属性：include-字符串或正则表达式，只有匹配的组件才会被缓存exclude-字符串或正则表达式，任何匹配的组件都不会被缓存//你不能只加空格。router-view也是一个组件。如果直接包裹在keep-alive中，那么会缓存该路径匹配到的所有视图组件。
