1.什么是路由
通俗地说就是网址;专业的说,就是每次GET或POST等请求在服务端有一个专门的正则配置列表,匹配到具体的一个路径分发到不同的Controller,进行各种操作最终将html或数据返回前端。
2.为什么要用前端路由
以往绝大多数的网站都是后端路由(多页面),它的好处是使页面在服务端渲染完毕再返回给浏览器,不用等待加载css和js,同时还对SEO(搜索引擎优化)友好等。但是缺点也很明显,就是模板由后端编写维护,前端开发需要安装后端服务,学习后端开发语言。
之后有了前后端分离的开发模式,后端只提供API来返回数据,前端通过Ajax获得数据后经过处理渲染到页面。后端负责数据,前端负责交互和可视化,条理清楚。特别是在Node.js出现后使得html模板完全由前端控制,并且同步或异步渲染由前端决定。
单页面富应用(SPA)的核心就是前端路由,在前后端分离的基础上再加一层前端路由。
3.什么是前端路由
由前端维护的路由规则。实现方式有两种。
1)锚点(#),就是url的hash,js通过hashChange事件监听url的改变。
2)HTML5的History模式,使url以“/”分隔,没有“#”,但是页面没有跳转,使用这种模式需要服务端 的支持,服务端在接受到所有请求后都指向同一个html文件,否则会报错。因此,SPA只有一个html,用来存放整个网站的所有内容,通过js来处理。
4.vue-router的使用方法
1)下载安装 npm install vue-router
2) 创建路由表:
a.在router.js文件中引入需要的vue,vue-router (import --- from ----)
b. 在实例化中 使用vue-router (Vue.use(VueRouter))
c. 创建路由实例,确定每个路径和相对应组件的映射关系
d.抛出路由实例(export default router)
3)在main.js中注册路由(引用路由,在实例中添加路由)
4)使用路由两个组件<router-link>&<router-view>
<router-link>中属性有:to,tag,active-class
to主要是为了跳转目标路由
tag=>为了渲染成某些特定的标签
active-class=》则给当前渲染的组件一个class
5.路由传参
1.传递参数:this.$router.push({name=“”,params:{list:'123' } })
接受参数:this.$route.params.list
2.传递参数:this.$router.push({name=“”,query:{list:'123' } })
接受参数:this.$route.query.list
a.由于query与params传参机制不一样,造成的差异,刷新页面会导致params传递参数消 失,而query却不会,如果要隐藏参数用params,如果强制刷新不被清除用query
b.传递路由参数是router,而接受路由的参数是route
6.嵌套路由
1.路由直接嵌套,指在写映射的时候就直接写嵌套
在主路由下面加一个children属性,继续写子路由
7.路由守卫(拦截器)
to:即将要进入的目标路由对象
from:当前导航正要离开的路由
next:执行下一步