Vue3—13—VueRouter

2021-09-25 12:05:10 阅读：164 来源： 互联网

标签：13 url route VueRouter Vue3 router 动态前端路由

一、路由是什么

使用步骤:
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这种东西；

标签：13,url,route,VueRouter,Vue3,router,动态,前端,路由
来源： https://www.cnblogs.com/EricShen/p/15333921.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9