1.路由的概念
路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源。
那么url地址和真实的资源之间就有一种对应的关系,就是路由。
路由分为前端路由和后端路由
1).后端路由是由服务器端进行实现,并完成资源的分发
2).前端路由是依靠hash值(锚链接)的变化进行实现
后端路由性能相对前端路由来说较低,所以,我们接下来主要学习的是前端路由
前端路由的基本概念:根据不同的事件来显示不同的页面内容,即事件与事件处理函数之间的对应关系
前端路由主要做的事情就是监听事件并分发执行事件处理函数
3.Vue Router简介
它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器,推荐使用。
Vue Router和Vue.js非常契合,可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。
Vue Router依赖于Vue,所以需要先引入Vue,再引入Vue Router
4.Vue Router的使用步骤
A.导入js文件
B.添加路由链接
C.添加路由占位符(最后路由展示的组件就会在占位符的位置显示)
D.定义路由组件
E.配置路由规则并创建路由实例
F.将路由挂载到Vue实例中
补充:
路由重定向:可以通过路由重定向为页面设置默认展示的组件
在路由规则中添加一条路由规则即可
5.嵌套路由,动态路由的实现方式
A.嵌套路由的概念
嵌套路由最关键的代码在于理解子级路由的概念
B.动态路由匹配
//通过/:参数名 的形式传递参数
补充:
如果使用$route.params.id来获取路径传参的数据不够灵活。
1.我们可以通过props来接收参数
2.还有一种情况,我们可以将props设置为对象,那么就直接将对象的数据传递给
组件进行使用
3.如果想要获取传递的参数值还想要获取传递的对象数据,那么props应该设置为
函数形式。
6.命名路由以及编程式导航
A.命名路由:给路由取别名
B.编程式导航
页面导航的两种方式:
A.声明式导航:通过点击链接的方式实现的导航
B.编程式导航:调用js的api方法实现导航
一. this. r o u t e r . p u s h 说 明 : 跳 转 到 指 定 U R L , 向 h i s t o r y 栈 添 加 一 个 新 的 记 录 , 点 击 后 退 会 返 回 至 上 一 个 页 面 t h i s . router.push 说明:跳转到指定URL,向history栈添加一个新的记录,点击后退会返回至上一个页面 this. router.push说明:跳转到指定URL,向history栈添加一个新的记录,点击后退会返回至上一个页面this.router.replace({path: ‘/index’})
二.this.$router.replace
说明:跳转到指定URL,替换history栈中最后一个记录,点击后退会返回至上上一个页面
使用方法和push相同。
this.$router.replace({path: ‘/index’})
三.this.$router.go(n)
说明:类似window.history.go(n),向前或向后跳转n个页面,n可正(先后跳转)可负(向前跳转)
this. r o u t e r . g o ( 1 ) / / 类 似 h i s t o r y . f o r w a r d ( ) t h i s . router.go(1) //类似history.forward() this. router.go(1)//类似history.forward()this.router.go(-1) //类似history.back()