3.路由切换#3.1.vue-router路由切换#3.1.1。什么是前端路由？路由的概念最早出现在后端，发送不同的请求，后端根据请求返回不同的资源。这个时候url跟后端交互，需要在后端配置路由跳转。这种开发方式有两个特点。一是整个项目中的前端代码和后端代码是灵活的。它们一起通常需要模板引擎的支持。代码混在一起后，不方便本地开发调试。一旦后端代码出现错误，前端就无法开发。前端局限于后端的开发方式，效率很低。项目通常由后端主导。第二，每切换一个页面，都需要重新请求服务器。即使两个页面有很多相似之处，也需要重新请求。随着单页应用的发展和MVVM概念的兴起，前后端分离和前端工程化的发展，前端做的事情越来越多，而前端圈子正在迅速上升。这里说的单页应用，通俗的说就是一个没有刷新的页面，url发生变化，对应组件的切换。前端路由的出现就是为了实现这个单页应用。总结一下，前端路由就是在前端控制不同的url路径，切换不同的组件。可以认为url和components是一种映射关系。例如：routes:[{path:'/',components:{default:Home,a:HomeSider,b:HomeMain}},{path:'/vip',component:Vip,children:[{path:'one',component:One},{path:'two',component:Two},{path:'three',component:Three}]},{path:'/course',component:Course}]在此配置中，'/vip'的url路径匹配组件Vip和'/course'的ulr路径，匹配Course组件#3.1.2.vue-router使用步骤1.安装模块npminstallvue-router--save2。导入模块importVueRouterfrom'vue-router'3。作为Vue插件Vue.use(VueRouter)4.创建路由实例对象constrouter=newVueRouter({routes:[{path:'/',component:Home},{path:'/questions',component:Questions},{path:'/vip',component:Vip},{path:'/course',component:Course}]})5.注入Vue选项参数newVue({router})6.告诉路由渲染匹配到要渲染位置的组件到router-view的位置#3.2.hash和历史#3.2.1。什么是单页应用？百度百科解释，单页网络应用（singlepagewebapplication，SPA）是只有一个网页的应用，加载单个HTML页面并在用户与应用交互时动态更新页面的网络应用3.2.2.什么是哈希和历史？Hash和history都是浏览器本身的属性。两种方法都可以访问地址。hash访问方式是在访问地址末尾添加#name，如：http://edu.nodeing.com#1、http://edu.nodeing.com#2，history方式控制页面通过back、forword、go等几种方式跳转，它们的区别在于hash不刷新，history会请求单页应用开发的后端接口。引入前端路由。前端路由的核心是在不向后端发送请求的情况下改变视图。如果不是单页应用，路由变化会向后端发送请求，例如：http://edu.nodeing.com/course...,http://edu.nodeing.com/classr...,visit这两个地址的路由不同，都会向后端发送请求，不符合前端路由的要求。为了在不向后端发送请求的情况下实现路由变化，可以使用hash和history这两种模式。hash：hash虽然在url中，但不会包含在http请求中，对后端没有影响。hash变化不会重新加载页面（不刷新）history：虽然history的几个方法是由back、forword、go等控制的，页面跳转会刷新页面，但是h5中新增了两个方法pushState和replaceState。这两种方式都可以达到前端路由的目的。它们应用于浏览器记录堆栈。在目前已有的back、forword、go之上，都提供了修改历史的功能。当他们执行修改时，虽然当前的url发生了变化，但浏览器并不会立即向后端发送请求。Vue-router使用hash和historyA模式实现路由控制#3.2.3。在vue-router中配置路由模式importVuefrom'vue'importVueRouterfrom'vue-router'importHomefrom'@/components/Home'importMyHeaderfrom'@/components/MyHeader'importMyContentfrom'@/components/MyContent'importMyFooterfrom'@/components/MyFooter'//让vue-router使用Vue.use(VueRouter)//配置路由信息constrouter=newVueRouter({//默认hash模式mode:'history',routes:[{path:'/',component:Home},{path:'/header',component:MyHeader},{path:'/content',component:MyContent},{path:'/footer',component:MyFooter}]})导出默认路由器
