Vue3—13—VueRouter

 

一、路由是什么

使用步骤:
1.配置路由映射表route 2.配置路由对象router,里面包括了route和history模式 3.vue加载插件 4.使用《route-link》标签或编程式路由this.$router.push()
5.配置《router-view》
Vue3—13—VueRouter

 

路由主要做数据转发的工作;

Vue3—13—VueRouter

 

 二、系统路由的三个阶段

1.后端路由后端阶段:每次url改变都要向后端服务器重新请求一次静态资源

 Vue3—13—VueRouter

 

2. 前端路由前端渲染阶段:每次url改变都要向静态资源服务器(前端服务器)重新请求一次静态资源

 Vue3—13—VueRouter

 

 3.前端路由前端渲染阶段(spa阶段):每次url改变不需要向服务器发送静态资源请求了

spa阶段,url发生改变,这个时候通过使用url的hash或者html的history浏览器也将不会去服务器请求资源了即不会实现页面的刷新,前端自己做出了响应切换了页面,并给浏览器渲染;

4.spa阶段是如何实现不向服务器发送资源的?

(4.1)

Vue3—13—VueRouter

 

(4.2)

replace是替换,没有回栈的操作

push是压栈,pop是回退可以出栈

Vue3—13—VueRouter

阻止默认行为,使用history;

Vue3—13—VueRouter

 

 三、路由的默认路径

Vue3—13—VueRouter

 

 

 四、路由的懒加载

Vue3—13—VueRouter

 

 

 五、内置组件《route-link》的属性

 这个组件内部看来调用的也是编程时路由router.push();

Vue3—13—VueRouter

 

 

 六、给route加属性

可以给路由映射表route放上name、meta属性; 

6.2获取route属性的值

然后可以通过this.$route.name取出值,this.$route.meta取出值;

七、动态路由

除了加属性,还可以设置动态路由

动态路由匹配关系:

不将路由映射表写死,根据传过来的url动态决定跳转;

通过router进入到每个sfc后,每个组件实例都可以通过this.$route获取进入本路由映射线对象route,然后通过this.$route.params.在route定义的动态路由名字,可以取出值;

Vue3—13—VueRouter

 

 

 7.2获取动态路由的值

Vue3—13—VueRouter

 

 

 7.3动态路由之匹配多个参数

Vue3—13—VueRouter

 

 

 八、路由嵌套

动态路由和路由嵌套要分清,路由嵌套是子路由,动态路由只不过是url不写死是动态决定的,是不是子路由无所谓;

 Vue3—13—VueRouter

8.2路由嵌套的配置

Vue3—13—VueRouter

 

 

 

九、通配路由

Vue3—13—VueRouter

 

 

 十、编程式路由

Vue3—13—VueRouter

 

 Vue3—13—VueRouter

 

 10.2路由除了传递url字符字符串,可以传递对象

Vue3—13—VueRouter

两种方式都可以传递query,即url的查询字符串

这个query式专业术语,就是url后面的?username=aaa&pwd=12345这种东西;

 

上一篇:HCIP 2021-09-22 静态路由案例


下一篇:mysql 主从数据同步配置