项目6 路由管理

5.1使用vue基本路由实现选项卡功能5.2使用vue路由实现后台管理系统的导航功能配置Vue路由twotasks初识路由目录CONTENTS什么是路由1路由的引入21.什么是路由我们有没有听说过“路由”的概念呢?当然了,路由器嘛。路由器主要用于连接多个逻辑上分开的网络，可以通过路由器功能来完成不同网络之间数据的传递。程序开发中的路由分为：前端路由后端路由1.什么是路由后端路由概念：根据不同的用户URL请求，返回不同的内容。本质：URL请求地址与服务器资源之间的对应关系。服务器资源后端路由浏览器每访问一次新页面的时候，都要向服务器发送请求，然后服务器会响应请求，在这个过程中会有一定的网络延迟。1.什么是路由SPA(SinglePageApplication)单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作；SPA实现原理之一：基于URL地址的hash(hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求)；在实现SPA过程中，最核心的技术点就是前端路由。SPA单页面应用程序1.什么是路由前端路由

对于单页面应用SPA来说，主要通过URL中的hash(#号)来实现不同组件间的切换。前端路由在访问一个新页面的时候仅仅是变换了一下hash值而已，没有和服务端交互，所以不存在网络延迟，提升了用户体验。前端路由/index.html#/home/index.html#/about/index.html#/person1.什么是路由1.什么是路由认识vue-routervue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue-router是基于路由和组件的路由用于设定访问路径,将路径和组件映射起来；在vue-router的单页面应用中,页面的路径的改变就是组件的切换。2.路由的引入

安装vue-router方式一：直接下载引入顺序不可颠倒！！！方式二：通过npm安装步骤1:安装vue-router步骤2:在模块化工程中使用它（因为是一个插件,所以需要通过Vue.use()来安装路由功能）3.总结什么是路由：前端路由和后端路由1路由的引入：直接引入，npm安装2总结路由的使用目录CONTENTS路由的基本使用1路由的执行过程21、路由的基本使用Vue-router的使用步骤第二步：创建组件第一步：引入vue.js和vue-router.js文件component的属性值，必须是一个组件对象，不能是组件的引用名称。第三步：创建VueRouter对象：设置routes数组，在该数组中设置每条路径的映射关系：

path：对应的路由component：path对应要加载的组件第四步：注册路由

在vue实例中注册VueRouter对象1、路由的基本使用第五步：使用路由

通过<router-link>的to属性，告诉系统，我要使用哪条路径渲染组件：当通过<router-link>找到对应路径后，便将该路径对应的组件加载并渲染，

其中<router-view>相当于组件的占位符，组件加载进来后，直接将该标签替换1、路由的基本使用3.总结路由的基本使用1路由的执行过程2总结使用vue基本路由实现选项卡功能任务实现内容CONTENTS提出任务1分析任务2归纳总结4实施任务3本次课任务使用vue基本路由实现选项卡功能1.提出任务引入vue.js和vue-router.js文件；创建组件；创建VueRouter对象；注册路由；使用路由重定向按钮高亮任务要点：案例效果：2.分析任务实践使用vue基本路由实现选项卡功能3.实施任务4.归纳总结总结模板使用路由待支付模板4.归纳总结总结创建组件对象创建vue-router注册路由5.1使用vue基本路由实现登录和注册的切换5.2使用vue路由实现后台管理系统的导航功能配置Vue路由twotasks路由传参目录CONTENTS动态路由1query方式传参2params方式传参31.动态路由在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径：/user/aaaa或/user/bbbb除了有前面的/user之外，后面还跟上了用户的参数，这种path和component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式：params)。动态路由在来回切换时，由于它们都是指向同一组件，Vue不会销毁再重新创建这个组件，而是复用这个组件。2.query方式传参query方式传参<router-link

to="/path?参数名1=参数值1&参数名2=参数值2"></router-link>query方式，参数会以查询字符串的方式显示在浏览器上，也就是?后面跟key和value对象中使用query的key作为传递方式在页面跳转的时候，可以在地址栏看到请求参数。配置路由格式:/router,也就是普通配置query方式传参传进来的参数，可以通过$route.query进行访问，this可以省略2.query方式传参2.params方式传参

let

routes=[{

//动态路径参数，以冒号开头

path:‘/login/:参数名1/:参数名2',

component:user

}]

在注册路由时，将参数用”/:”分隔，多个参数，也是如此，比如：‘/home/:user/:id’<router-link

to=“path/参数值1/参数值2"></router-link>在router-link中的to属性，应保持和路由path中一致的格式，且to可以被v-bind动态绑定3.params方式传参传进来的参数，可以通过$route.params进行访问params方式传参4.总结query方式传参1params方式传参2总结嵌套路由目录CONTENTS嵌套路由的概念1嵌套路由的使用方法21.嵌套路由的概念什么是嵌套路由实际项目中的应用界面通常是由多层嵌套的组件组合而成，比如在home页面中,我们希望通过/home/news和/home/message访问一些内容。一个路径映射一个组件,访问这两个路径也会分别渲染两个组件。嵌套路由就是在路由里面嵌套它的子路由。2.嵌套路由的使用方法嵌套子路由的关键属性是children；children也是一组路由，可以去配置路由数组，相当于前面讲到的routes；每一个子路由里面可以嵌套多个组件，子组件又有路由导航和路由容器。children属性<router-link

to="/父路由的地址/要去的子路由"></router-link>实现嵌套路由的步骤（1）创建对应的子组件（2）在路由映射中配置对应的子路由（3）在组件内部使用子路由2.嵌套路由的使用方法3.总结嵌套路由的概念1嵌套路由的使用方法2总结命名路由目录CONTENTS命名路由的概念1命名路由的使用21.命名路由的概念vue-router提供了一种隐式的引用路径，即命名路由，可以在创建Router实例的时候，在

routes

中给某个路由设置名称name值。通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候，通过路由的名称取代路径地址直接使用。像这种命名路由的方式，无论path多长、多烦琐，都能直接通过name来引用，十分方便。2.命名路由的使用在创建Router实例时，在

routes

中给某个路由设置名称name值；通过路由的名称取代路径地址直接使用2.命名路由的使用

为何使用命名路由？原因一：变更了router对象中的path，那么还需要去修改<router-link>中的to的属性值；原因二：如果router对象中的path比较长，那么通过命名路由的方式，不论path多长，都可以使用该路由的名称name，因此比较方便；原因三：可以避免我们的参数传递显示在浏览器的url框中（仅在params中有效，query无效）。3.总结命名路由的概念1命名路由的使用2总结命名视图目录CONTENTS什么是命名视图1命名视图的应用21、什么是命名视图使用<router-view>可以为视图进行命名，主要用来负责路由跳转后组件的展示。在<router-view>上定义name属性表示视图的名字，根据不同的name值展示不同的页面，如left、main等。如果<router-view>没有设置名字，那么默认为default。2、命名视图的应用步骤2：创建组件对象步骤3：创建并挂载路由步骤4：使用命名路由步骤1：创建模板3.总结命名视图的概念1命名视图的使用方法2总结编程式路由导航目录CONTENTSrouter.push()1router.go()21.router.push()在Vue实例内部可以通过$router访问路由实例，因此通过this.$router.push即可实现页面的跳转。this.$route：路由对象，指向当前所在的路由映射，即所配置的路由中，哪条处于活跃状态，就指向哪条，可通过this.$route访问当前路由。this.$router：全局路由器对象，指向对应创建的VueRouter对象实例。项目中任何页面都可通过此属性获取到路由器对象；通过调用路由器对象的push，go等方法，跳转到指定页面。应用push()方法定义导航this.$router.push('home')//跳转到字符串表示的路径this.$router.push({path:'home'})//跳转到指定路径this.$router.push({name:'user'})//跳转到指定命名的路由this.$router.push({path:'home',query:{id:'2'}})//跳转到指定路径并带有查询参数this.$router.push({name:'user',params:{userId:'1'}})//跳转到指定命名的路由并带有查询参数1.router.push()query传参通过该方式传参，参数会显示在地址栏中。1.router.push()params传参通过该方式传参，参数不会显示在地址栏中1.router.push()router.go()方法的参数是一个整数，表示在history历史记录中向前或者后退多少步，类似于window.history.go()。this.$router.go(-1)相当于history.back()，表示后退一步。this.$router.go(1)相当于history.forward()，表示前进一步。功能类似于浏览器上的后退和前进按钮，相应的地址栏也会发生改变。2.router.go()$router.go()2.router.go()3.总结router.push()1总结router.go()2使用vue路由实现后台管理系统的导航功能任务实现内容CONTENTS提出任务1分析任务2归