日常隨筆歸納總結：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>