query和params传参的区别

一、区别

1. 传参可以使用params和query两种方式；
2. 使用params传参只能是name: 'xxx'，不能用path:'/xxx'，因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！
3. 使用query传参最好用path:'/xxx'来引入路由，如果要用name: 'xxx'来引入路由，有一个前提条件，router/index.js文件中配置的name和path必须是一样的（path:'xxx',name: 'xxx'这种情况一般是作为子路由），但是一般配置都是path:'/xxx',name: 'xxx'。所以query传参最好用path:'/xxx'来引入路由；
4. params是路由的一部分，必须要在路由后面添加参数名；query是拼接在url后面的参数，没有也没关系；
5. 二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示；

二、示例

1. 使用query传参

//query传参，使用path跳转
this.$router.push({
    path:'/second',
    query: {
        queryId:'20180822',
        queryName: 'query'
    }
})

//query传参接收
this.queryName = this.$route.query.queryName;
this.queryId = this.$route.query.queryId;

2. 使用params传参

//params传参 使用name
this.$router.push({
  name:'second',
  params: {
    id:'20180822',
     name: 'query'
  }
})

//params接收参数
this.id = this.$route.params.id ;
this.name = this.$route.params.name ;

//路由

{
path: '/second/:id/:name', //使用params传参这里必须添加参数
name: 'second',
component: () => import('@/view/second')
}

路由模式hash、history

最直观的区别就是在url中hash带了一个很丑的#，而history是没有#的；

一、hash
1、它是前端路由，前端路由的核心就是改变视图的同时不会向后端发出请求，例如www.baidu.com/#/1变成www.baidu.com/#/2，是不会发出请求的，因为#/1，#后面的内容是不会被包含在http请求中的（锚点不会在http请求中）；
2、hash模式背后的原理是onhashchange事件；获取window.location.hash
参考：http://js.jirengu.com/cukasadesu/2/edit

二、history
1、首先它的url中就没有#了，利用HTML5 History的pushState()和replaceState()方法，来完成url的跳转；但是有一点需要注意，一旦刷新，肯定是会请求服务器的，因为可以自由地设置路径，这时如果服务器上没有相对应的资源，就会刷出404页面；
2、IE8不支持；
3、获取window.location.pathName，设置window.history.pushState(null,title,href)
参考：http://js.jirengu.com/xixerefoxu/2/edit

router和route的区别

一、$router

1、$router对象是全局路由对象，是router构造方法的实例；
2、它的方法有push、replace、go等等；

二、$route

1、$route表示当前的路由信息，包含当前URL解析得到的信息；
2、它的一些属性有params、query、path、name、meta等；