路由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":'是我'
}
总结:
- query的params的作用不分伯仲
- 在隐藏参数的情况下用parmas
- parmas的传参,需要在routes中配置name='Detail’和path=’Detail/:skuId‘属性的参数
- 一般的情况下用query的话,配置的代码少写
周更Vue技能树=>JavaScript技能书