Vue路由params和query的区别(传参和跳转)

路由VueRouter

两种跳转

声明式导航（最容易实现）:router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)

编程式导航（用JS代码来进行跳转）：
$router : 是路由操作对象，只写对象 push实现跳转
$route : 路由信息对象，只读对象 读取属性中的query和params

this.$router.push({ name:‘hello’, query:{ name:‘word’, age:‘11’ } })

params和query

跳转区别：

this.$router.push({
	path:'路由路径'，
	name：‘路由名’
	
	//不限制跳转关键字
	query:{
		“参数名”：值
	}
	
	//只能name跳转，记得route文件中书写name=‘xxx’（无 /）route中path需要带参
	params：{
		“参数名”：值
	}
)

query相当于GET请求，页面跳转的时候，可以在地址栏看到请求参数

params相当于POST请求，参数不会在地址栏中显示

传参区别
query传递参数会在url后面用？连接起来，且参数之间用&&符号连接然后显示在页面的url中（get）

params传递参数不会显示在页面中（post）

		{
			//params传参的话，path和name组合使用
			path: '/Detail/:name/:id',
			name:'Detail',
			component: () => import('@/views/Detail.vue'),
		},

	query传参就在页面中配置就好了
	this.$router.push({
		path:'路由路径'，
		
		
		//不限制跳转关键字
		query:{
			"name"：`大帅比'
			"keyword"：'是我'
		}

总结：

1. query的params的作用不分伯仲
2. 在隐藏参数的情况下用parmas
3. parmas的传参，需要在routes中配置name='Detail’和path=’Detail/:skuId‘属性的参数
4. 一般的情况下用query的话，配置的代码少写

周更Vue技能树=>JavaScript技能书