vue路由--Vue Router
2021/10/3 6:14:48
本文主要是介绍vue路由--Vue Router,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
路由
路由是指路由器从一个接口上收到数据包,根据数据包的目的地址进行定向并转发到另一个接口的过程。
设置路由器的主要目的是找到数据包从源到目的地的最有效路径。
什么是声明式路由,什么是编程式路由?
声明式:
<router-link to="跳转的路径"></router-link> 要链接到一个命名路由,可以给 router-link 的 to 属性传一个对象: <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
编程式:
router.push({ name: 'user', params: { userId: 123 } }) //替换掉当前的历史记录,会产生新的历史记录 this.$route.push('跳转的路径') //替换掉当前的历史记录,直接返回首页面 this.$route.replace('跳转的路径')
r o u t e 和 route和 route和router的区别
$router:路由器对象
$route:当前路由信息
r o u t e 是 “ 路 由 信 息 对 象 ” , 包 括 p a t h , p a r a m s , h a s h , q u e r y , f u l l P a t h , m a t c h e d , n a m e 等 路 由 信 息 参 数 。 而 route是“路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由信息参数。 而 route是“路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由信息参数。而router是“路由实例”对象包括了路由的跳转方法,钩子函数等
vue-router的作用是什么? 为什么不使用a标签?
路由,主要用于组件切换,通过设置不同的path,切换视图,
向服务器发送的不同的请求,获取不同的资源
通过a标签和vue-router对比,vue-router避免了重复渲染,
不像a标签一样需要重新渲染,导致一些动态添加路由的机制失效
vue传参中params与query的区别
1)引入方式不同: query要使用path来引入,params要使用name来引入,接受参数格式类似,引用分别是this.route.query.name和this.route.query.name和this.route.params.name
2)形成的路径不同(或者url地址显示不同):
使用query传参的话,会在浏览器的url栏看到传的参数类似于get请求,使用params传参的话则不会,类似于post请求。
params传递后形成的路径:/router/123,/router/zhangsan
query传递后形成的路径:/router?id=666&name=zhangsan
3)是否受动态路径参数影响
Query传递的参数不会受路径参数的影响,会全部展示到路径上,刷新不会丢失query里面的数据;
params传递的参数会受路径参数的影响,只会展示含有动态路径参数的部分,刷新会丢失没有设置动态路径参数的params的数据
这篇关于vue路由--Vue Router的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-15useCallback教程:React Hook入门与实践
- 2024-11-15React中使用useContext开发:初学者指南
- 2024-11-15拖拽排序js案例详解:新手入门教程
- 2024-11-15React中的自定义Hooks案例详解
- 2024-11-14受控组件项目实战:从零开始打造你的第一个React项目
- 2024-11-14React中useEffect开发入门教程
- 2024-11-14React中的useMemo教程:从入门到实践
- 2024-11-14useReducer开发入门教程:轻松掌握React中的useReducer
- 2024-11-14useRef开发入门教程:轻松掌握React中的useRef用法
- 2024-11-14useState开发:React中的状态管理入门教程