Vue Router - 官方文档
1: vue路由
路由的基本概念
// --------------------------------- 路由的基本概念 ---------------------------------------路由的基本概念就是对应关系 分为前端和后端路由 后端路由就是后端渲染,存在性能问题 后端路由: 根据用户不同的URL请求,返回不同的内容, 本质上就是URL和服务器之间的对应关系 前端路由: 根据不同的用户事件,显示不同的页面内容 本质用户事件处理函数之间的对应关系,用户触发的事件去请求路由中的事件处理函数 ,事件函数渲染对应的内容复制代码
实现简易的前端路由
// --------------------------------- 实现简易的前端路由 ---------------------------------------通过a标签的href属性跳转到对应的页面1:创建局部组件,每个组件渲染一个H1标签2:在全局vm对象中data:{comName:'zhuye'}这个comNname属性是谁,通过:is="comName"跳转到对应的页面3:配置路由组件, 在component中配置组件, 因为组件名·称是一致的,随意就简写。【或者说是因为是家路由,只需要组件名称即可】4:在switch中判断:向location.hash.slice(1)把#号,给截取掉4.1:再去判断case的值, 如hash地址是主页, 就渲染vm.comName=对应的组件,5:components中的组件挂载在根组件app中, <component :is="conName">接收data中的属性,根据属性显示对应的组件 【总结: 就是拿到hash值,通过switch判断hash值,显示对应的组件,默认显示的是主页, 通过点击hash发生改变,就会切换页面, 因为:is接收了data中的这个comName】复制代码
介绍vue-router
// --------------------------------- 介绍vue-router ---------------------------------------关于Vue Router可以全官网查看具体的使用流程 它支持历史模式,或者是hash模式 支持路由嵌套 支持路由参数 支持编程式路由 支持命名路由复制代码
vue-router的基本使用
// --------------------------------- vue-router的基本使用 ---------------------------------------vue-router的基本使用1: 导入文件: 1.1: 导入vue.js文件, 1.2:导入vue-router.js文件2:在app中挂载router实例对象, 以及隐形的占位符: 2.1:<router-link to"/user">路由实例对象, 2.1:<router-view>路由占位符4:创建局部组件, const user = 'template:', 只是简单地创建了局部组件, 组件中只是简单的渲染了一个template文字而已5:创建路由对象, 用来配置路由规则: const router = new Router({routes:[{path: '/user', component: User}]}).里面的路由routes是固定的写法, 里面可以配置多个路由对象, path跳转的路由地址, component:匹配的路由组件6:创建名实例对象,挂载路由对象: 在data后面挂载路由7:点击tab切换到对应的页面8:其实原理就是, router-link最终变成了a标签, 而to属性就变成了href属性,复制代码
路由重定向
// --------------------------------- 路由重定向 ---------------------------------------路由重定向一般应用场景是: 新打开一个页面,会跳转到指定的页面 通过redirect属性跳转的1: 导入路由文件, 1.1: 先导入vue.js 1.2: 导入vue-router.js文件2:在根组件中挂载2个路由跳转: 其实就是带文字的跳转功能: <router-link to="/user"> 这样他就能跳转到对应的页面,2.1:但是下面必须放一个:<router-view>,他是一个隐藏的路由占位符, 可以理解这是一种隐形的能力, 它让挂载的路由,拥有跳转的能力3:创建局部的路由组件: const User = { tempalte:'<h1>User组件</h1>' }4:创建路由实例对象: const router = new VueRouter创建路由实例对象, routes:[{path:'/', redirect:'/user'}]指定要跳转的请求地址, 和以及匹配的组件5:在vm实例对象中挂载router对象,这样路由就可以在根组件中挂载并占位了。复制代码
嵌套路由
// --------------------------------- 嵌套路由 ---------------------------------------嵌套路由就是,一个路由里面嵌套了多个子路由, 且子路由也是可以互相tab切换的1: 挂载常规路由组件,其实就是父组件,再挂载路由占位符2:在创建子局部路由的时候,他的template模板中也学习根组件一样挂载自己的孙组件, 也是对应的挂载<router-link>,和对应的路由占位符3:创建单独的2个孙组件, 每个组件的template模板中就渲染一句话而已。4:创建路由对象, new Router, routes中匹配路由规则,path就是跳转的路由地址, redirect就是重定向的页面组件,但是在children中是配置孙组件的匹配规则,规则是个父组件的规则是一致的, 也有自己的path和component2个必填参数5: 创建vm根组件实例对象, 在跟对象的data后面挂载router,这样rouetr就能在根组件中使用了复制代码
动态路由匹配1
// --------------------------------- 动态路由匹配1 ---------------------------------------动态匹配参数,就是在切换tab页面的时候,能接收到url地址后面的params参数,接收方式通过$router.params能回去到请求路由地址对象中的具体信息1:在路由对象中添加参数; 创建路由对象,routes中匹配路由规则:path:'/user/:id', component:User, 在path配置中携带了具体的请求ID,2:在父组件中通过$router.params.id就能拿到路由的具体id,显示到页面中3:页面效果, 点击切换tab,就能看到每个tab中携带的id, 因为在挂载组件的时候,可以通过to="/user/1"路由请求的时候把id给携带了复制代码
动态路由匹配2
// --------------------------------- 动态路由匹配2 ---------------------------------------1:开启props传参06.动态路由匹配2复制代码
// --------------------------------- 动态路由匹配2 ---------------------------------------2:传递静态参数,但不能传递静态参数07.动态路由匹配3复制代码
// --------------------------------- 动态路由匹配2 ---------------------------------------3:函数方式开启动态和静态参数,结合其起来08.动态路由匹配4复制代码
命名路由
// --------------------------------- 命名路由 ---------------------------------------命名路由,就是在路由对象中多了一个name属性,他有自己的名字1: 在创建路由对象中,routes对象的中的name:user, 这个路由就有了名字, props: router=>({uname:'zs', age:20, id:route.params.id})绑定了I等属性2:在router-link :to="{name: 'user', params:{id:3}}", 通过它能跳转到这个带名字的路由,并且拿到params中的id3:页面效果,点击tab切换页面,并且能显示ID,目前感觉和动态匹配路由差异不大复制代码
编程式导航
// --------------------------------- 编程式导航 ---------------------------------------编程式路由导航,就是在点击在template标签触发的点击事件,该点击事件中通过this.$router.push'/register'指定要跳转的地址,1:还是普通的挂载路由的方式,在创建路由子组件中props属性绑定了要携带的参数,tempalte中渲染参数信息,自己的methods中能触发为指定点击事件, 点击事件中通过this.$router.push跳转到具体的路由, 实现了点击跳转到指定的路由,并且从指定的路由切换回来复制代码
阶段小结: Vue Router案例
抽离并渲染App根组件
// ------------------------- 抽离并渲染App根组件 --------------------1:初始化页面结构【页面一加载就展示App这个页面,创建基础的父组件】1:导入文件: 导入vue和vue-router.js文件2:在根组件中挂载路由占位符3:定义App局部父组件, 组件中就是5个左侧菜单和右侧的内容区域,4:创建router路由对象,配置routes里面的path:/, component:App,这样页面一加载完成就会显示app这个组件5:创建vm实例对象, 在对象身上挂载router,让子组件拥有路由导航功能6:页面效果,页面一加载就会展示App这个页面复制代码
将左侧菜单改造为路由链接
// ------------------------- 抽离并渲染App根组件 --------------------点击跳转到对应的路由页面,但是目前还不能展示这个孙组件的内容,因为还没有做1:页面结构: header头部区域, main中间区域,main中分为左右菜单,和右侧内容区域,和底部footer底部区域。2:给每个子路由组件添加 <router-link to="/user">这样点击左侧菜单,就能跳转到指定的空白路由页面。复制代码
创建左侧菜单对应的路由组件并添加路由占位符
// ------------------------- 抽离并渲染App根组件 --------------------创建定义好的路由, 现在创建对应的路由,实现真正的点击路由,跳转到路由页面1:创建了5个孙路由组件, 每个路由组件中暂时只是渲染一个template模板,2:因为模板已经创建好了,但是这5个孙组件,想要在父组件中显示, 就必须在父组件中的template中通过<router-view/>展示,才能点击展示对应的孙路由页面【发现个细节:<router-view/和在app父组件的不一致, 父组件的是<router-view>】3: 现在就可以点击左侧菜单,就能跳转到对应的孙路由页面。虽然页面只有简单的一句话复制代码
添加子路由规则并实现路由重定向
// ------------------------- 抽离并渲染App根组件 --------------------配置路由,实现点击左侧菜单,跳转到对应的孙路由页面1: 重定向到/user页面:routes:[{path:/', component:App, redirect:'/users'}]只要访问的是根路径,将显示App这个组件,并将路由重定向到/users这个路由页面 2:在App中配置自己的children子组件,里面有5个孙组件页面,每个孙组件都有自己的路由请求地址, 也对应自己的孙组件, 实现点击左侧菜单,在右侧展示对应的路由页面复制代码
渲染用户列表数据
// ------------------------- 抽离并渲染App根组件 --------------------给user页面渲染一个表格,其中的数据都是自己的假数据1:在User组件的data中必须return返回这个数据,这是一个数组,数组中有多个对象,每个对象有统一的属性,提供了假数据2-3:在模板中创建一个表格table, th不需要遍历,所以是单独的一行, 下面tbody中的内容需要遍历,在tr一行中开启遍历, <tr v-for="item in userlist" :key="item.id">通过遍历,把数据填充到每一个td中,完成了表单数据的渲染填充4:页面效果,/users这个组件,就被默认的当做了主页面, 且渲染了数据, 细节操作后面的详情, 是单独添加的, 完成了/users页面数据的渲染。但是需要data中的对象是通过return返回出去的复制代码
编程式导航跳转到详情页并实现后退功能
// ------------------------- 抽离并渲染App根组件 --------------------实现点击详情跳转到详情/userinfo页面。详情页面也可以点击退出来1:新建一个孙局部组件, props:['id'],绑定id, 因为在挂载孙组件自己的时候,props:true开启了路由传参, 可以接收到点击左侧菜单的id,然后根据id退回到对应的页面1.1:自己的template中触发了点击事件, 在自己的methods处理函数中饭,通过this.$router.go(-1),往后退了一步, 哪来回哪去, 根据id回退的1.2: 因为这也属于父组件中的一个页面, 所以定义到了父路由的下面, path:'/userinfo/:id', component: UserInfo, props:true,在请求地址后面接收动态id, props:true开启了允许其他路由把id传给我2:点击详情,跳转到详情页:在表格的渲染中,通过点击触发自己的点击事件,并把id给传递过来, 自己的处理函数中接收这个id,调用了this.$router.push('/userinfo'+id),点击就切换到userinfo这个页面,但是因为传递了id,还能找到回家的路。完成了点击跳转到详情页面, 并从详情页面回退回来。复制代码