Vue router 매개 변수 전달 및 새로 고침 페이지 매개 변수 분실 문제 해결

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"}
페이지를 새로 고치면 데이터가 손실되지 않습니다.
페이지 데이터 손실을 새로 고치는 방법:
this.$사용router.push ({name:'모듈 이름','query:{//매개 변수}) 방식으로 참고합니다.
단점: 매개 변수 값이 모두 URL에 연결되면 URL이 매우 길고 동시에 볼 수 있습니다.
this.$router.push ({name:'모듈 이름','params: {//매개 변수}) 루트 파일을 설정할 때 매개 변수를 URL에 맞춥니다.
url:http://localhost:8081/#/paramsPassingByRouter/paramsMode/20180101/%E5%BC%A0%E4%B8%89/z3/18
단점: 동상.
1과 2 결합 사용:this.$router.push ({name:'모듈 이름','params: {//매개 변수},query: {//매개 변수}).
local Storage 를 사용하여 간편하게 저장할 수 있습니다.
url: http://localhost:8081/#/paramsPassingByRouter/paramsMode/z3
파라미터와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>

Vue router 전달 매개 변수와 새로 고침 페이지의 매개 변수 분실 문제를 해결하는 이 글은 여기까지 소개합니다. 더 많은 Vue router 전달 매개 변수 분실 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 보십시오. 앞으로 저희 많은 응원 부탁드립니다!