質問編集履歴

2

タイトルをわかりやすく変更

2021/02/16 19:33

投稿

widget11
widget11

スコア221

test CHANGED
@@ -1 +1 @@
1
- rails × vue.js(vue router)で画面が切り替わらない
1
+ vue.js(vue router)でパスは変わるが画面遷移できない
test CHANGED
File without changes

1

文法の修正、試した結果の記載

2021/02/16 19:33

投稿

widget11
widget11

スコア221

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/api/v1/auth/sign_in#/users`
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 router;
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/1');  /* このメソッドは呼び出せているがhtmlが描画されない*/⭐️
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
  お手数をおかけしますが、よろしくおお願いします。