Vue Router 傳參方式：
1. this.$router.push({ name: '模塊名稱', params: { // 各參數 } })
router.js：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
export default new Router({ routes: [ { path: '/paramsPassingByRouter', component: ParamsPassingByRouter, children: [ { path: 'paramsMode', name: 'paramsMode', component: ParamsMode } ] } ]}) |
ParamsPassingByRouter.vue：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!-- 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：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!-- 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：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
export default new Router({ routes: [ { path: '/paramsPassingByRouter', component: ParamsPassingByRouter, children: [ { path: 'queryMode', name: 'queryMode', component: QueryMode } ] } ]}) |
ParamsPassingByRouter.vue：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!-- 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：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!-- 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: { // 各參數 } })。
老老實實的用 localStorage 存儲。
url: http://localhost:8081/#/paramsPassingByRouter/paramsMode/z3
可以與 params 和 query 方式配合使用，可以暴露的參數顯示在 url 上，同時刷新參數也不會丟失。
銷毀頁面的時候把 localStorage 存儲的內容清除。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
// 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傳遞參數丟失內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://segmentfault.com/a/1190000019699706
