Vue Router 如何传递参数（针对问题：Vue Router 传递参数，刷新页面后参数消失）

因为工做须要最近学习vue.js的使用作先后端分离的项目。由于是边使用边学习，所以会遇到不少不少问题，因此决定总结一些问题并记录下来：

vue Router传参数的方式以及注意事项：

遇到的问题：Vue Router 传递参数，刷新页面后参数消失

参考1：Router 传递参数后，刷新页面 对象参数消失，求解。

参考2：vue router 如何使用params query传参，以及有什么区别

传参是前端常常须要用的一个操做，不少场景都会须要用到上个页面的参数，本文将会详细介绍vue router 是如何进行传参的，以及一些小细节问题。

Vue router如何传参

params、query是什么？

params：/router1/:id ，/router1/123，/router1/789 ,这里的id叫作params

query：/router1?id=123 ,/router1?id=456 ,这里的id叫作query。

路由界面：

router.js:

路由设置这里，当你使用params方法传参的时候，要在路由后面加参数名，而且传参的时候，参数名要跟路由后面设置的参数名对应。使用query方法，就没有这种限制，直接在跳转里面用就能够。

 

 

注意：若是路由上面不写参数，也是能够传过去的，但不会在url上面显示出你的参数，而且当你跳到别的页面或者刷新页面的时候参数会丢失（以下图所示），那依赖这个参数的http请求或者其余操做就会失败。

 

 

注意看上面的路由参数，id这个参数是咱们有设置在路由上面的，id2我没有设置在路由里面，因此刷新以后id2就不见了，在项目中，咱们总不可能要求用户不能刷新吧。

组件1：

<template>
  <div class="app_page">
    <h1>从这个路由传参到别的路由</h1>
    <router-link :to="{ name:'router1',params: { id: status ,id2: status3},query: { queryId:  status2 }}" >
      router-link跳转router1
    </router-link>
  </div>
</template>
<script>
export default {
  name: 'app_page',
  data () {
    return {
      status:110,
      status2:120,
      status3:119
    }
  },
}
</script>

编程式导航跳转：

上面的router-link传参，也可使用router文档里面的编程式导航来跳转传参。

this.$router.push({  name:'router1',params: { id: status ,id2: status3},query: { queryId:  status2 }});
//编程跳转写在一个函数里面，经过click等方法来触发复制代码

这两种传参效果是如出一辙的，编程式导航，能够用来作判断跳转，好比是否受权，是否登陆，等等状态，对此不太了解的小伙伴们，能够跳过这个编程式导航，之后再来看。

组件2：

<template>
  <div class="router1">
    <h1>接收参数的路由</h1>
    <h1> params.id：{{ $route.params }}</h1>
    <h1>query.status:{{ $route.query.queryId }}</h1>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

传参仍是比较简单的，按着上面组件的使用方法就能够成功传过去了。

提示：获取路由上面的参数，用的是$route，后面没有r。

params传参和query传参有什么区别：

 

 

一、params是路由的一部分,必需要有。query是拼接在url后面的参数，没有也不要紧。

params一旦设置在路由，params就是路由的一部分，若是这个路由有params传参，可是在跳转的时候没有传这个参数，会致使跳转失败或者页面会没有内容。

好比：跳转/router1/:id

<router-link :to="{ name:'router1',params: { id: status}}" >正确</router-link>
    <router-link :to="{ name:'router1',params: { id2: status}}">错误</router-link>

二、params、query不设置也能够传参，可是params不设置的时候，刷新页面或者返回参数会丢失，query并不会出现这种状况，这一点的在上面说过了