Vue-router中query与params的区别及三种不同的路由模式

使用路由的基本目的是为了实现页面之间的切换。

常用的路由组件传参

第一种： params传参
声明式：

<router-link :to="'/detail/' + id">详情</router-link>
<router-link :to="{name: 'detail', params: { id: 1}}">详情</router-link>

编程式

router.push({name: 'detail', params: {id: 1}})

以上两种写法的接收参数使用$route.params.id

第二种： query传参

router.push('/detail/' + id)
router.push({ path: '/detail', query: { id: 1}})

接收参数使用$route.query.id

name+params和path+query有什么区别呢？

进行路由配置时，path是必配的，而name是可以选配。

使用name或者path进行导航时，当传参可以使用params时，接收参数使用$route.params;当传参使用query时，接收参数使用$route.query。

query的参数一般以?xx=xx形式跟在路径后面。query类似于Ajax中的get传参，params则类似于post。展现形式上，query在浏览器地址栏中显示参数，params则不现实。

params传参浏览器刷新参数会丢失。
query参数会显示在URL中，适合传递非敏感信息。

三种路由模式

HASH模式：采用createWebHashHistory()创建，哈希是指在URL中“#”后面的部分，如: http://localhost:8888/index.html#/user, '/user'部分叫哈希值，当该值变化时，不会导致浏览器向服务器发出请求，如果浏览器不发出请求，也就不会刷新页面。哈希值的变化可以采用浏览器原生提供的hashchange事件来监听。而Vue Router的hash模式就是不断地修改哈希值来监听和记录页面的路径。

HTML5模式/HISTORY：采用createWebHistory()创建，HTML 5模式时基于HTML5 History Interface中新增的pushState() 和 replaceState()两个API来实现的，通过这两个API可以改变浏览器URL地址且不会发送刷新浏览器的请求，不会产生#hash值，如：http://localhost:8888/index.html/user。

内存模式：采用createMemoryHistory()创建，该模式组要用于服务端渲染，在服务端是没有浏览器地址栏的概念的，所以将用户的历史记录都放在内存中。

HTML5模式和HASH模式都可以满足浏览器的前进和后退功能，HTML5模式相较于HASH模式URL更加简洁，接近于真实的URL，但是它的缺点是浏览器刷新后，去请求真实的服务器的URL地址，对于纯前端来说，会丢失一些数据。
需要对服务器进行配置，如Nginx配置的例子：

   
    location / {
        try_files $uri $uri/ /index.html
    }