VueRouter的query和params传参的使用和区别

1. 声明式导航下的query和params传参

1.1 声明式导航

<router-link> 又名声明式导航，是 vue-router 提供的专门拿来替代原生<a>标签的。

原生的<a>标签，href值必须加 #/... 才能和路由匹配，非常不友好，使用 <router-link> 就不用加#了，就像这样：

<router-link to="/find">发现音乐</router-link>
<router-link to="/my">我的音乐</router-link>
<router-link to="/part">朋友</router-link>

<router-link> 提供了声明式导航高亮的功能，这是因为<router-link> 会自动给当前导航添加两个类名：

①  router-link-active: 激活的导航链接 \\ 模糊匹配
例如 <router-link to="/my" />， 可以匹配到  /my，/my/a，/my/b ...等    

②  router-link-exact-active: 激活的导航链接 \\ 精确匹配
例如<router-link to="/my" />， 只能匹配 /my

要是觉着 router-link-active \\ router-link-exact-active 两个类名太长不好记，也可以在配置路由规则的地方重命名：

# 笔者从未改过
const router = new VueRouter({linkActiveClass: 'active',linkExactActiveClass: 'exactActive'
})

1.2 query传参

在跳转路由时，可以给路由匹配的组件传值：

# 语法: to="/路径?k=v&k=v"
<router-link to="/find?id=1&singer=jackson">...</router-link>

 对应页面组件接收传递过来的值：

<script>标签里，使用 this.$route.query.xx 获取
<template>标签里，使用 {{ $route.query.xx }} 获取

1.3 params传参

params传参的应用频率要高于query传参，因为params传参可以利用URL分层特性来暗示结构。

params传参的步骤：
①  在new VueRouter里配置好路由规则 (挖坑)

# 语法
# path: '/path/:参数名1/:参数名2...'
const router = new VueRouter({routes: [{ path: '/part/:id/:singer', component: FindMusic }]
})

②  在 <router-link> 标签上传参 (填坑)

<router-link to="/路径/值1/值2" />
<router-link to="/part/101/jackson" />

③  对应页面组件接收传递过来的值：

<script>标签里，使用 this.$route.params.xxx 获取
<template>标签里，使用 {{ $route.params.xxx }} 获取

2. 编程式导航下的query和params传参

不使用 <router-link> 切换路由路径, 使用JS的方式切换路由路径, 这种形式称之为“编程式导航”。

编程式导航和声明式导航同时出现时，在某些场景下，会导致 router-link-exact-active \\ router-link-active高亮类名失效，需要手动修正：

<router-link:class="{ # 利用正则表达式判断路径是否以'/find'开头'router-link-exact-active': /^\\/find/.test($route.path) }"
>
...
</router-link>

2.1 query传参

JS切换路由路径时传值给路由页面，三种语法：

# 语法1
this.$router.push( '/路径?k=v&k=v' )
this.$router.push( '/find?id=101&name=zs' )

# 语法2
this.$router.push( { path: '/路径', query: { k: v, k:v } })
this.$router.push({ path: '/find', query: { name: 'ls', id: 101 } } 
)

# 语法3
this.$router.push ( { # 路由规则的自命名# 使用name传参，可以保持数据的类型，id的值101仍然是数字型name: 'abc' , query: { name: 'ls', id: 101 } } 
)

2.2 params传参

语法1：仍然是在 new VueRouter( ) 时挖坑，例如

# 挖坑
# path: '/path/:参数名1/:参数名2...'
const router = new VueRouter({routes: [{ path: '/part/:id/:singer', component: FindMusic}]
})

this.$router.push( '/part/101/zs' )

语法2：使用name传参

# 使用name传参时，params和query都可以携带，但是params默认存储在内存中，
# 刷新网页会丢失 (可以挖坑解决，也可以使用本地存储解决)
this.$router.push ({ // 路由规则的自命名name: 'abc' , params: {id: 101,name: 'zs'}
})

3. 小结

① 传参可以使用params和query两种方式
② params传参只能用name来引入路由，即push里面只能是name:’xxxx’，不能是path:’/xxx，因为params只能用name来引入路由，如果这里写成了path，接收参数页面会 undefined！！！
③ query传参使用path来引入路由
④ params是路由的一部分，必须要在路由path上添加参数名（挖坑）。query是拼接在url后面的参数，不需要挖坑。
⑤ 二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会在地址栏中显示。

End---------------------