【vue路由传参】vue自带方法路由传参方式、页面跳转带id过去、刷新页面数据不丢失、隐藏URL后的参数 详细教程

vue路由传参方式

项目中很多情况下都需要进行路由之间的传值，想过很多种方式

sessionstorage/localstorage/cookie 进行离线缓存存储也可以，用vuex也可以，不过有些大材小用吧，不管怎么说因场景而异

一、页面刷新数据会丢失

使用场景：
页面跳转带id过去

方法一：通过路由属性中的name来确定匹配的路由，通过params来传递参数

通过路由属性中的name来确定匹配的路由，通过params来传递参数

eg:点击当前页的某个按钮跳转到另外一个页面去，并将某个值带过去

<div class="examine" @click="insurance(2)">查看详情</div>

// 父组件传值：将id带过去
methods：{
  insurance(id) {
       this.$router.push({
          name: 'particulars',
          params: {
            id: id
          }
        })
  }

// 路由配置
{
     path: '/particulars',
     name: 'particulars',
     component: particulars
   }

// 子组件：获取参数id
this.$route.params.id

温馨提示：该方法刷新页面数据会丢失

*该方法可以隐藏URL后的参数

方法二：使用Vue全局API：Vue.observable

使用Vue全局API：Vue.observable

详细教程看如下博客：Vue.observable使用教程

温馨提示：该方法刷新页面数据会丢失

二、页面刷新数据不会丢失

方法一：使用动态路由传参，path中携带参数id，路由中使用 /:id 绑定对应参数

使用动态路由传参，path中携带参数id，路由中使用 /:id 绑定对应参数

methods：{
  insurance(id) {
       //直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/particulars/${id}`,
        })
}

// 对应路由配置
{
    path: '/particulars/:id',
    name: 'particulars',
    component: particulars
}

// 子组件中获取参数
this.$route.params.id

温馨提示：该方法刷新页面数据不会丢失

方法二：使用path匹配路由，通过query传参

使用path匹配路由，通过query传参

url路径中携带：

methods：{
  insurance(id) {
        this.$router.push({
          path: '/particulars',
          query: {
            id: id
          }
        })
  }

{
    path: '/particulars',
    name: 'particulars',
    component: particulars
}

// 子组件获取参数
this.$route.query.id

温馨提示：该方法刷新页面数据不会丢失