Javascript

vue路由--Vue Router

本文主要是介绍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的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!