1.1相关理解1.1.1vue-router的理解Vue的一个插件库，专门用于实现SPA应用1.1.2SPA应用的理解单页Web应用（singlepagewebapplication,SPA)整个应用程序只有一个完整的页面。点击页面中的导航链接不会刷新页面，只是页面的局部更新。需要通过ajax请求获取数据。1.1.3路由的理解什么是路由？路由是一组映射关系（key-value）key是路径，value可能是function或者component路由分类后端路由：理解：value是function，用来处理客户端提交的请求工作过程：服务器收到请求后根据请求路径找到匹配的函数处理请求，返回响应数据2.前端路由：理解：value是一个组件，用来展示页面的内容。工作过程：当浏览器的路径改变时，相应的组件就会显示出来。1.2基本路由1.2.1安装和使用安装vue-router，命令：npminstallvue-router应用插件：Vue.use(VueRouter)写入路由器配置项：//importVueRouterimportVueRouterfrom'vue-router'//引入路友组件importAboutfrom'../components/About'importHomefrom'../components/Home'//创建一个路由实例对象，管理一组路由规则constrouter=newVueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home}]})//exposerouterexport默认路由器实现切换（active-class可配置高亮样式）About指定显示位置需要注意的几点：路由组件通常存放在pages文件夹中，generalcomponents通常通过切换存放在components文件夹中，“隐藏”的路由组件默认销毁，需要时再挂载。每个组件都有自己的$route属性，该属性存储自己的路由信息??。应用中只有一个router，可以通过组件的$router属性获取。1.2.2总结编写和使用路由的3个步骤。定义路由组件。注册路由。使用路由1.3嵌套（多级）路由配置路由规则，使用children配置项：routes:[{path:'/about',component:About,},{path:'/home',component:Home,children:[//通过children配置子级路由{path:'news',//这里一定不能写：/newscomponent:News},{path:'message',//这里不要写:/messagecomponent:Message}]}]跳转(写完整路径):News1.4路由传输参考to1.4.1Route查询参数传递参数跳转跳转接收参数：$route.query.id$route.query.title1.4.2具名路由作用：可以简化路由跳转如何使用命名路由：{path:'/demo',component:Demo,children:[{path:'test',component:Test,children:[{name:'hello'//命名路由路径：'welcome',component:Hello,}]}]}简化跳转：跳转跳转跳转1.4.3路由的params参数配置路由，声明接收params参数'Xiangqing',path:'detail/:id/:title',//使用占位符声明接收params参数component:Detail}]}]}传参跳转跳转特别注意：当路由携带params参数时，如果对象写法为to使用，不能使用path配置项，必须使用name配置！接收参数：$route.params.id$route.params.title1.4.4路由props配置功能：让路由组件更方便接收参数{name:'xiangqing',path:'detail/:id',component:Detail,//第一种写法：props值是一个对象，对象中的所有键值组合最终都会通过props传递给Detail组件//props:{a:900}//第二种写法:props的值为布尔值，如果布尔值为true，则将路由接收到的所有params参数通过props传递给Detail组件//props:true//第三种写法：props的值为a函数，函数返回的对象中的每一组key-value都会传递给Detail组件props(route){return{id:route.query.id,title:route.query.title}}}1.4.5的replace属性作用：控制路由跳转时浏览器历史记录的操作方式。浏览器历史记录有两种写法：分别是push和replace，push是添加历史记录，replace是替换当前记录。路由跳转时，默认是push。如何开启替换模式：News1.5程序化路由导航this.$router.push(path)：相当于点击路由链接（可以返回当前路由界面)this.$router.replace(path):将当前路由替换为新的路由（不可以返回当前路由界面）this.$router.back():请求（返回）之前记录的路由this.$router.go(-1)：请求（返回）上一条记录路由this.$router.go(1)：请求下一条记录路由
