日常随笔归纳总结：vue-router路由传参

情景：

vue-router用params传参，F5强制刷新参数会被清空，造成页面无法获取参数报错，那么如何获取参数才能不被清空呢？

解决方式：

1、用query，由于参数适用路径传参的所以F5强制刷新也不会被清空。（传参强烈建议适用string）

2、也可以选用sessionstorage/localstorage/cookie存储。

下面先讲解下

一、vue-router用params传参

配置路由

var routes = [{
    path: '/',
    redirect: '/dashboard',

}, {
    path: '/',
    component: Home,
    children: [{
        path: '/dashboard',
        component: dashboard,
        name:'dashboard',
    }, {
        path: '/resourceManagement/:id',
        component: resourceManagement,
        // 一定要写name,params必须用name来识别路径
        name:'resourceManagement'
    }]
}];

var router = new VueRouter({
    routes: routes
});

传递参数用$router

<!-- test-vue-router页面 -->
<template>
  <div>
    <a @click="routerTo()">query传参</a>
  </div>
</template>
<script>
export default {
  methods: {
    routerTo() {
      this.$router.push({
        name: `TestVueRouterTo`,
        params: {
          page: '1', code: '8989'
        }
      })
    }
  }
}
</script>

接受参数：用$route,少个r

<!-- test-vue-router-to页面 -->
<template>
  <div>
  </div>
</template>
<script>
export default{
  data() {
    return {
      page: '',
      code: ''
    }
  },
  created() {
    this.getRouterData()
  },
  methods: {
    getRouterData() {
      this.page = this.$route.params.page
      this.code = this.$route.params.code
      console.log('page', this.page)
      console.log('code', this.code)
    }

  }
}
</script>

query：最好也用name来识别，保持与params一致性，好记了，路径传参

1：路径配置（跟params一样，代码不写了）

2：传递参数页

<!-- test-vue-router页面 -->
<template>
  <div>
    <a @click="routerTo()">query传参</a>
  </div>
</template>
<script>
export default {
  methods: {
    routerTo() {
      this.$router.push({
        name: `TestVueRouterTo`,　　　　　// 只是把query改了，其他都没变
        query: {
          page: '1', code: '8989'
        }
      })
    }
  }
}
</script>

3：接受参数

<!-- test-vue-router-to页面 -->
<template>
  <div>
  </div>
</template>
<script>
export default{
  data() {
    return {
      page: '',
      code: ''
    }
  },
  created() {
    this.getRouterData()
  },
  methods: {
    getRouterData() {
      // 只是改了query，其他都不变
      this.page = this.$route.query.page
      this.code = this.$route.query.code
      console.log('page', this.page)
      console.log('code', this.code)
    }

  }
}
</script>

sessionStoage:容量大、安全、临时存储，跨页面

localStorage: 容量大、安全、永久存储、跨页面

<!-- 存储页面 test-local -->
<template>
  <div>
    <a @click="toAnother()">点击</a>
  </div>
</template>
<script>
export default {
  methods: {
    toAnother() {
      // session 添加session
      sessionStorage.code = 90088
      sessionStorage.setItem('page', 1)
      // local 添加local
      localStorage.age = 27
      localStorage.setItem('passcode', 12345)
      this.$router.push(`/testLocalTo`)
    }
  }
}
</script>

<!-- 跳转页面 test-local-to -->
<template>
  <div></div>
</template>
<template>
  <div></div>
</template>
<script>
export default{
  created() {
    this._getLocalData()
  },
  methods: {
    _getLocalData() {
      // session 获取session
      let code = sessionStorage.code
      console.log('code =', code)
      let page = sessionStorage.getItem('page')
      console.log('page =', page)
      // local 获取local
      let age = localStorage.age
      console.log('age =', age)
      let passcode = localStorage.getItem('passcode')
      console.log('passcode =', passcode)
    }
  }
}
</script>

cookie与sessionStorage/localStorage机制不一样，这里单聊

cookie：容量小、不安全、有时间期限、跨页面

<template>
  <div>
    <a @click="setOneCookie()">设置cookie</a>
    <div class="set">
      <span>设置cookie</span>
      <input type="text" v-model="key">
      <input type="text" v-model="val">
      <input type="submit" @click="setOneCookie()" value="提交设置">
    </div>
    <div class="find">
      <span>查询cookie</span>
      <input type="text" v-model="query">
      <input type="submit" @click="getOneCookie()" value="查询">
    </div>
    <div class="find">
      <span>删除cookie</span>
      <input type="text" v-model="deleteName">
      <input type="submit" @click="removeCookie(deleteName)" value="删除">
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      key: '',
      val: '',
      days: 5,
      query: '',
      deleteName: ''
    }
  },
  methods: {
    // 查询一个cookie
    getOneCookie() {
      let getCookieVal = this.getCookie(this.query)
      console.log('getCookieVal', getCookieVal)
    },
    // 设置一个cookie事件
    setOneCookie() {
      // console.log('key', typeof (this.key), 'val', typeof (this.key))
      this.setCookie(this.key, this.val, this.days)
    },　　// 设置cookie
    setCookie(key, val, exdays) {
      // 获取当前时间 格式：Thu Mar 22 2018 16:05:32 GMT+0800 (中国标准时间)
      let now = new Date()
      // getDate()获取天数 exdays增加的天数
      // now.setDate(now.getDate() + exdays) 转化为毫秒数(1970 年 1 月 1 日至今的毫秒数)
      now.setDate(now.getDate() + exdays)
      // 设置cookie key val expires
      document.cookie = key + '=' + val + ';expires=' + now
      console.log('Allcookie', document.cookie)
    },　　// 获取cookie
    getCookie(key) {
      let keyName = key + '='　　　 // arr 数据
      let arr = document.cookie.split(';')
      console.log(arr)
      for (var i = 0; i < arr.length; i++) {
        let el = arr[i].trim()
        console.log(el)　　　　　// el.substring(keyName.length, el.length)获取等号后面的val值
        if (el.indexOf(keyName) === 0) return el.substring(keyName.length, el.length)
      }
      return ''
    },　　// 移除cookie
    removeCookie(key) {　　　　// 时间设为-1即可
      this.setCookie(key, '', -1)
      console.log('Allcookie', document.cookie)
    }
  }
}
</script>
<style lang="scss" scoped>
  .set,.find{
    margin: 20px 20px;
  }
</style>