一、路由是什么
使用步骤:
1.配置路由映射表route 2.配置路由对象router,里面包括了route和history模式 3.vue加载插件 4.使用《route-link》标签或编程式路由this.$router.push()
5.配置《router-view》
路由主要做数据转发的工作;
二、系统路由的三个阶段
1.后端路由后端阶段:每次url改变都要向后端服务器重新请求一次静态资源
2. 前端路由前端渲染阶段:每次url改变都要向静态资源服务器(前端服务器)重新请求一次静态资源
3.前端路由前端渲染阶段(spa阶段):每次url改变不需要向服务器发送静态资源请求了
spa阶段,url发生改变,这个时候通过使用url的hash或者html的history浏览器也将不会去服务器请求资源了即不会实现页面的刷新,前端自己做出了响应切换了页面,并给浏览器渲染;
4.spa阶段是如何实现不向服务器发送资源的?
(4.1)
(4.2)
replace是替换,没有回栈的操作
push是压栈,pop是回退可以出栈
阻止默认行为,使用history;
三、路由的默认路径
四、路由的懒加载
五、内置组件《route-link》的属性
这个组件内部看来调用的也是编程时路由router.push();
六、给route加属性
可以给路由映射表route放上name、meta属性;
6.2获取route属性的值
然后可以通过this.$route.name取出值,this.$route.meta取出值;
七、动态路由
除了加属性,还可以设置动态路由
动态路由匹配关系:
不将路由映射表写死,根据传过来的url动态决定跳转;
通过router进入到每个sfc后,每个组件实例都可以通过this.$route获取进入本路由映射线对象route,然后通过this.$route.params.在route定义的动态路由名字,可以取出值;
7.2获取动态路由的值
7.3动态路由之匹配多个参数
八、路由嵌套
动态路由和路由嵌套要分清,路由嵌套是子路由,动态路由只不过是url不写死是动态决定的,是不是子路由无所谓;
8.2路由嵌套的配置
九、通配路由
十、编程式路由
10.2路由除了传递url字符字符串,可以传递对象
两种方式都可以传递query,即url的查询字符串
这个query式专业术语,就是url后面的?username=aaa&pwd=12345这种东西;