15

Vue Router 传参方式:

1. this.$router.push({ name: '模块名称', params: { // 各参数 } })

router.js:

export default new Router({
  routes: [
    {
      path: '/paramsPassingByRouter',
      component: ParamsPassingByRouter,
      children: [
        {
          path: 'paramsMode',
          name: 'paramsMode',
          component: ParamsMode
        }
      ]
    }
  ]
})

ParamsPassingByRouter.vue:

<!-- html -->
<button @click="paramsMode(testData)">params传参</button>

<!-- js -->
<script>
export default {
  data () {
    return {
      testData: {
        id: '20180101',
        name: '张三',
        aka: 'z3',
        age: '18'
      }
    }
  },
  methods: {
    paramsMode (data) {
      this.$router.push({
        name: 'paramsMode',
        params: data
      })
    }
  }
}
</script>

ParamsMode.vue:

<!-- html -->
<div class="params-mode">{{ testData }}</div>

<!-- js -->
<script>
export default {
  data () {
    return {
      testData: {}
    }
  },
  created () {
    this.testData = this.$route.params
  }
}
</script>

效果:

url:http://localhost:8081/#/paramsPassingByRouter/paramsMode
页面显示:{"id":"20180101","name":"张三","aka":"z3","age":"18"}

但是刷新页面后,数据会丢失,显示:{}。

2. this.$router.push({ name: '模块名称', query: { // 各参数 } })

router.js:

export default new Router({
  routes: [
    {
      path: '/paramsPassingByRouter',
      component: ParamsPassingByRouter,
      children: [
        {
          path: 'queryMode',
          name: 'queryMode',
          component: QueryMode
        }
      ]
    }
  ]
})

ParamsPassingByRouter.vue:

<!-- html -->
<button @click="queryMode(testData)">query传参</button>

<!-- js -->
<script>
export default {
  data () {
    return {
      testData: {
        id: '20180101',
        name: '张三',
        aka: 'z3',
        age: '18'
      }
    }
  },
  methods: {
    queryMode (data) {
      this.$router.push({
        name: 'paramsMode',
        query: data
      })
    }
  }
}
</script>

QueryMode.vue:

<!-- html -->
<div class="query-mode">{{ testData }}</div>

<!-- js -->
<script>
export default {
  data () {
    return {
      testData: {}
    }
  },
  created () {
    this.testData = this.$route.query
  }
}
</script>

效果:

url:http://localhost:8081/#/paramsPassingByRouter/queryMode?id=20180101&name=%E5%BC%A0%E4%B8%89&aka=z3&age=18
页面显示:{"id":"20180101","name":"张三","aka":"z3","age":"18"}

刷新页面后,数据不会丢失。

解决刷新页面数据丢失的方案:

  1. 使用 this.$router.push({ name: '模块名称', query: { // 各参数 } }) 方式传参。

    缺点:参数值都拼接在 url 上,url 会很长,同时都可被看到。
  2. this.$router.push({ name: '模块名称', params: { // 各参数 } }) 路由文件设置的时候把参数拼到 url 里。

    url:http://localhost:8081/#/paramsPassingByRouter/paramsMode/20180101/%E5%BC%A0%E4%B8%89/z3/18
    缺点:同上。
  3. 1 和 2 结合使用:this.$router.push({ name: '模块名称', params: { // 各参数 }, query: { // 各参数 } })
  4. 老老实实的用 localStorage 存储。

    url: http://localhost:8081/#/paramsPassingByRouter/paramsMode/z3
    可以与 params 和 query 方式配合使用,可以暴露的参数显示在 url 上,同时刷新参数也不会丢失。
    销毁页面的时候把 localStorage 存储的内容清除。
    // router.js
    {
      path: 'paramsMode/:aka',
      name: 'paramsMode',
      component: ParamsMode
    }
    
    <!-- ParamsMode.vue 修改 -->
    <script>
    export default {
      data () {
        return {
          testData: {}
        }
      },
      created () {
        const tempData = localStorage.getItem('tempData')
        if (tempData) {
          this.testData = JSON.parse(tempData)
        } else {
          this.testData = this.$route.params
    
          localStorage.setItem('tempData', JSON.stringify(this.$route.params))
        }
      },
      beforeDestroy () {
        localStorage.removeItem('tempData')
      }
    }
    </script>

月半圆儿丨TED
206 声望4 粉丝