質問編集履歴

2

URLのリンク記載の修正

2020/05/29 02:15

投稿

bonsanqueen
bonsanqueen

スコア8

test CHANGED
File without changes
test CHANGED
@@ -22,7 +22,7 @@
22
22
 
23
23
  動的ルートマッチングというものがあり、
24
24
 
25
- [https://router.vuejs.org/ja/guide/essentials/dynamic-matching.html#%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%83%BC%E5%A4%89%E6%9B%B4%E3%81%AE%E6%A4%9C%E7%9F%A5]
25
+ [参考URL](https://router.vuejs.org/ja/guide/essentials/dynamic-matching.html#%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%83%BC%E5%A4%89%E6%9B%B4%E3%81%AE%E6%A4%9C%E7%9F%A5)
26
26
 
27
27
 
28
28
 

1

前回より具体的な内容に変更しました

2020/05/29 02:15

投稿

bonsanqueen
bonsanqueen

スコア8

test CHANGED
@@ -1 +1 @@
1
- Vuejs でURLのハッシュ値の維持
1
+ Vuejs でネストされたルーティングのURLにパラメータを付けるがうまくかない
test CHANGED
@@ -8,38 +8,126 @@
8
8
 
9
9
  案としては、
10
10
 
11
- URLの後に#bangou01 のようにハッシュ値のようなものを付けて、
11
+ URLの後にパラメーターを付けて、
12
12
 
13
- フォーム送信前に、URLからハッシュ値だけ取得して登録したいと思います。
13
+ フォーム送信前に、URLからパラメーターを取得して登録したいと思います。
14
14
 
15
15
 
16
16
 
17
- 例:https://example.com/#bangou01
17
+ 例:https://example.com/12345
18
18
 
19
19
 
20
20
 
21
- しかし、複数画面遷移すると、URLが画面毎切り替わってしまう為
21
+ 方法を調べてみると、Vuejsは、
22
22
 
23
- シュ値を維持できません。
23
+ 動的ルートマチングというものがあり、
24
+
25
+ [https://router.vuejs.org/ja/guide/essentials/dynamic-matching.html#%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%83%BC%E5%A4%89%E6%9B%B4%E3%81%AE%E6%A4%9C%E7%9F%A5]
24
26
 
25
27
 
26
28
 
27
- 例:https://example.com/#bangou01 (TOP画面)
29
+ { path: '/user/:id', component: User }
28
30
 
29
- https://example.com/confirm (確認画面)
31
+ のように:idを付けることができ、
30
32
 
31
- https://example.com/result (完了画面)
33
+ 取得する際も、$route.params.id で可能とのこと。
32
34
 
33
35
 
34
36
 
35
- やりたいこと↓
37
+ これを参考に、ネストしルーティングに書てみたのですが、
36
38
 
37
- 例:https://example.com/#bangou01 (TOP画面
39
+ 404 Not Found 画面が表示されてしまいます。
38
-
39
- https://example.com/#bangou01/confirm (確認画面)
40
-
41
- https://example.com/#bangou01/result (完了画面)
42
40
 
43
41
 
44
42
 
43
+ ```ここに言語を入力
44
+
45
+ routes: [
46
+
47
+ {
48
+
49
+ path: '/:id',
50
+
51
+ component: RegParent,
52
+
53
+ children: [
54
+
55
+ {
56
+
57
+ path: "/",
58
+
59
+ component: RegInput01,
60
+
61
+ meta: {
62
+
63
+ title: '入力01'
64
+
65
+ }
66
+
67
+ },
68
+
69
+ {
70
+
71
+ path: "/reg_inp02",
72
+
73
+ component: RegInput02,
74
+
75
+ meta: {
76
+
77
+ title: '入力02'
78
+
79
+ }
80
+
81
+ },
82
+
83
+ {
84
+
45
- router.js でパスの指定はしていますが、この場合どのようにすればよいでしょうか?
85
+ path: "/reg_confirm",
86
+
87
+ component: RegConfirm,
88
+
89
+ meta: {
90
+
91
+ title: '確認'
92
+
93
+ }
94
+
95
+ },
96
+
97
+ {
98
+
99
+ path: "/reg_result",
100
+
101
+ component: RegResult,
102
+
103
+ meta: {
104
+
105
+ title: '完了'
106
+
107
+ }
108
+
109
+ }
110
+
111
+ ]
112
+
113
+ },
114
+
115
+ {
116
+
117
+ path: '*',
118
+
119
+ component: NotFound
120
+
121
+ }
122
+
123
+ ]
124
+
125
+ });
126
+
127
+ ```
128
+
129
+
130
+
131
+ パラメーターである「:id」の書き方が間違っているのか、
132
+
133
+ 他にも修正する箇所があるのか現在手探りで解決できずにいます。