質問編集履歴
2
タイトルをわかりやすく変更
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
vue.js(vue router)でパスは変わるが画面遷移ができない
|
test
CHANGED
|
File without changes
|
1
文法の修正、試した結果の記載
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
## 2/17追記(router-viewとrouter.jsの修正)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
1
5
|
###環境、ファイル構成
|
|
2
6
|
|
|
3
7
|
ruby on rails 6
|
|
@@ -28,17 +32,17 @@
|
|
|
28
32
|
|
|
29
33
|
###やりたいこと
|
|
30
34
|
|
|
31
|
-
ログイン画面(login.vue)からログインして成功(200が返される)したら、router.pushを用いてUsers.vueという画面に遷移し表示を行いたい。(SPAを想定してます)
|
|
35
|
+
ログイン画面(login.vue)からログインして成功(200が返される)したら、router.pushを用いてUsers.vueという画面に遷移し表示を行いたい。(vue-routerを用いたSPAを想定してます)
|
|
32
36
|
|
|
33
37
|
|
|
34
38
|
|
|
35
39
|
###問題
|
|
36
40
|
|
|
37
|
-
ログイン成功後router.pushによりusers.vueを呼び出しているのは確認できる(users.vueのscript書いてあるgetメソッド呼び出される)が、画面が切り替わらずログイン画面のままでusers.vueのviewが描画されない。
|
|
41
|
+
ログイン成功後router.pushによりusers.vueを呼び出しているのは確認できる(users.vueのscript書いてあるgetメソッド呼び出される)が、画面が切り替わらずログイン画面のままでrouter-viewタグを記載しているがusers.vueのviewが描画されない。
|
|
38
42
|
|
|
39
43
|
またurlが少し変化するのみで画面の遷移はされない。
|
|
40
44
|
|
|
41
|
-
`http://localhost:3000/api/v1/auth/sign_in#/ => http://localhost:3000/
|
|
45
|
+
`http://localhost:3000/api/v1/auth/sign_in#/ => http://localhost:3000/users`
|
|
42
46
|
|
|
43
47
|
|
|
44
48
|
|
|
@@ -78,7 +82,19 @@
|
|
|
78
82
|
|
|
79
83
|
|
|
80
84
|
|
|
85
|
+
const route = new Router({
|
|
86
|
+
|
|
87
|
+
routes: route,
|
|
88
|
+
|
|
89
|
+
base: process.env.BASE_URL,
|
|
90
|
+
|
|
91
|
+
mode: 'history'
|
|
92
|
+
|
|
93
|
+
});
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
|
|
81
|
-
export default route
|
|
97
|
+
export default route;
|
|
82
98
|
|
|
83
99
|
```
|
|
84
100
|
|
|
@@ -110,6 +126,8 @@
|
|
|
110
126
|
|
|
111
127
|
</el-form>
|
|
112
128
|
|
|
129
|
+
<router-view/> ⭐️追記
|
|
130
|
+
|
|
113
131
|
</div>
|
|
114
132
|
|
|
115
133
|
</div>
|
|
@@ -214,7 +232,7 @@
|
|
|
214
232
|
|
|
215
233
|
⭐️ axios
|
|
216
234
|
|
|
217
|
-
.get('http://localhost:3000/api/v1/users
|
|
235
|
+
.get('http://localhost:3000/api/v1/users'); /* このメソッドは呼び出せているがhtmlが描画されない*/⭐️
|
|
218
236
|
|
|
219
237
|
}
|
|
220
238
|
|
|
@@ -232,12 +250,12 @@
|
|
|
232
250
|
|
|
233
251
|
```
|
|
234
252
|
|
|
235
|
-
とりあえずログインフォームから、usersという文字列が表示されたら個人的に成功なのですが
|
|
253
|
+
とりあえずログインフォームから、Users.vueに記載されているようにusersという文字列が表示されたら個人的に成功なのですが
|
|
236
254
|
|
|
237
255
|
users.vueのスクリプトは呼び出しているが画面が切り替わらず、そのままな理由がわかりません。
|
|
238
256
|
|
|
239
257
|
users.vueの画面( html)を表示するにあたり、何か記載が足らない箇所があるのでしょうか？
|
|
240
258
|
|
|
241
|
-
追記修正は随時承っております。
|
|
259
|
+
追記修正依頼は随時承っております。
|
|
242
260
|
|
|
243
261
|
お手数をおかけしますが、よろしくおお願いします。
|