質問編集履歴
2
タイトルをわかりやすく変更
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
vue.js(vue router)でパスは変わるが画面遷移ができない
|
body
CHANGED
|
File without changes
|
1
文法の修正、試した結果の記載
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
## 2/17追記(router-viewとrouter.jsの修正)
|
|
2
|
+
|
|
1
3
|
###環境、ファイル構成
|
|
2
4
|
ruby on rails 6
|
|
3
5
|
vue.js
|
|
@@ -13,12 +15,12 @@
|
|
|
13
15
|
・・packs
|
|
14
16
|
・・・login.js
|
|
15
17
|
###やりたいこと
|
|
16
|
-
ログイン画面(login.vue)からログインして成功(200が返される)したら、router.pushを用いてUsers.vueという画面に遷移し表示を行いたい。(SPAを想定してます)
|
|
18
|
+
ログイン画面(login.vue)からログインして成功(200が返される)したら、router.pushを用いてUsers.vueという画面に遷移し表示を行いたい。(vue-routerを用いたSPAを想定してます)
|
|
17
19
|
|
|
18
20
|
###問題
|
|
19
|
-
ログイン成功後router.pushによりusers.vueを呼び出しているのは確認できる(users.vueのscript書いてあるgetメソッド呼び出される)が、画面が切り替わらずログイン画面のままでusers.vueのviewが描画されない。
|
|
21
|
+
ログイン成功後router.pushによりusers.vueを呼び出しているのは確認できる(users.vueのscript書いてあるgetメソッド呼び出される)が、画面が切り替わらずログイン画面のままでrouter-viewタグを記載しているがusers.vueのviewが描画されない。
|
|
20
22
|
またurlが少し変化するのみで画面の遷移はされない。
|
|
21
|
-
`http://localhost:3000/api/v1/auth/sign_in#/ => http://localhost:3000/
|
|
23
|
+
`http://localhost:3000/api/v1/auth/sign_in#/ => http://localhost:3000/users`
|
|
22
24
|
|
|
23
25
|
|
|
24
26
|
### 該当のソースコード
|
|
@@ -38,7 +40,13 @@
|
|
|
38
40
|
}
|
|
39
41
|
]);
|
|
40
42
|
|
|
43
|
+
const route = new Router({
|
|
44
|
+
routes: route,
|
|
45
|
+
base: process.env.BASE_URL,
|
|
46
|
+
mode: 'history'
|
|
47
|
+
});
|
|
48
|
+
|
|
41
|
-
export default
|
|
49
|
+
export default route;
|
|
42
50
|
```
|
|
43
51
|
```ここに言語を入力
|
|
44
52
|
<!-- login.vue -->
|
|
@@ -54,6 +62,7 @@
|
|
|
54
62
|
</el-form-item>
|
|
55
63
|
<el-button type="primary" @click="onSubmit" >ログイン</el-button>
|
|
56
64
|
</el-form>
|
|
65
|
+
<router-view/> ⭐️追記
|
|
57
66
|
</div>
|
|
58
67
|
</div>
|
|
59
68
|
</template>
|
|
@@ -106,7 +115,7 @@
|
|
|
106
115
|
methods:{
|
|
107
116
|
async getAccountData() {
|
|
108
117
|
⭐️ axios
|
|
109
|
-
.get('http://localhost:3000/api/v1/users
|
|
118
|
+
.get('http://localhost:3000/api/v1/users'); /* このメソッドは呼び出せているがhtmlが描画されない*/⭐️
|
|
110
119
|
}
|
|
111
120
|
},
|
|
112
121
|
async mounted(){
|
|
@@ -115,8 +124,8 @@
|
|
|
115
124
|
}
|
|
116
125
|
</script>
|
|
117
126
|
```
|
|
118
|
-
とりあえずログインフォームから、usersという文字列が表示されたら個人的に成功なのですが
|
|
127
|
+
とりあえずログインフォームから、Users.vueに記載されているようにusersという文字列が表示されたら個人的に成功なのですが
|
|
119
128
|
users.vueのスクリプトは呼び出しているが画面が切り替わらず、そのままな理由がわかりません。
|
|
120
129
|
users.vueの画面( html)を表示するにあたり、何か記載が足らない箇所があるのでしょうか？
|
|
121
|
-
追記修正は随時承っております。
|
|
130
|
+
追記修正依頼は随時承っております。
|
|
122
131
|
お手数をおかけしますが、よろしくおお願いします。
|